{% extends 'partials/base.html.twig' %}
{% import 'user-manager-macros.html.twig' as macros %}

{% set title = "PLUGIN_ADMIN_ADDON_USER_MANAGER.USER_MANAGER"|tu %}

{% block titlebar %}
  {% if not user %}
  <div class="button-bar">
    <a class="button" href="#modal-admin-addon-user-manager-new" data-remodal-target="modal-admin-addon-user-manager-new"><i class="fa fa-plus"></i> {{ "PLUGIN_ADMIN.ADD"|tu }}</a>
  </div>

  <h1><i class="fa fa-fw fa-user-o"></i> {{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.USER_MANAGER"|tu }}</h1>
  {% else %}
  <div class="button-bar">
    <a class="button" href="{{ base_url }}/user-manager"><i class="fa fa-reply"></i> {{ "PLUGIN_ADMIN.BACK"|tu }}</a>
    {% if exists %}
    <a class="button disable-after-click" href="{{ uri.addNonce(uri.route(true) ~ '/task' ~ ps ~ 'userDelete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i> {{ "PLUGIN_ADMIN.DELETE"|tu }}</a>
    <a class="button disable-after-click" href="{{ uri.addNonce(uri.route(true) ~ '/task' ~ ps ~ 'userLoginAs', 'admin-form', 'admin-nonce') }}"><i class="fa fa-sign-in"></i> {{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.LOGIN_AS"|tu }}</a>
    {% endif %}
    <button class="button" type="submit" name="task" value="admin-addon-user-manager-save" form="blueprints"><i class="fa fa-check"></i> {{ "PLUGIN_ADMIN.SAVE"|tu }}</button>
  </div>
  <h1><i class="fa fa-fw fa-user"></i> {{ "PLUGIN_ADMIN.USER"|tu }}: {{ user.username|e }}</h1>
  {% endif %}
{% endblock %}

{% set ps = config.system.param_sep %}
{% set appendUrl = '?filter=' ~ filter|url_encode %}

{% block content %}
  {% if not user %}
  {% set style = listStyle|default('grid') %}

  <h1>{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.USERS"|tu }}</h1>

  {% if filterException %}
  <div class="notices red"><h2>{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.FILTER_ERROR"|tu }}</h2><p>{{ filterException.message }}</p></div>
  {% endif %}

  <div class="admin-addon-user-manager-filter">
    <div class="admin-addon-user-manager-filter__input">
      <form method="get">
        <div class="block block-text">
          <div class="form-field vertical">
            <div class="form-data" data-grav-default="{{ filter }}">
              <div class="form-input-wrapper">
                <input name="filter" value="{{ filter }}" type="text" placeholder="{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.FILTER_USERS"|tu }}">
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="admin-addon-user-manager-filter__help">
      <a href="https://github.com/david-szabo97/grav-plugin-admin-addon-user-manager/blob/master/docs/filter.md#users" class="button" target="_new"><i class="fa fa-question"></i> {{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.HELP"|tu }}</a>
    </div>
  </div>

  <div class="admin-addon-user-manager-style">
    {% if style != 'grid' %}<a href="{{ uri.route(true) ~ '/listStyle' ~ ps ~ 'grid' ~ '/page' ~ ps ~ pagination.current ~ appendUrl }}"><i class="fa fa-th"></i></a>{% else %}<i class="fa fa-th"></i>{% endif %}
    {% if style != 'list' %}<a href="{{ uri.route(true) ~ '/listStyle' ~ ps ~ 'list' ~ '/page' ~ ps ~ pagination.current ~ appendUrl }}"><i class="fa fa-list"></i></a>{% else %}<i class="fa fa-list"></i>{% endif %}
  </div>

  <form method="post">
    <div class="admin-addon-user-manager admin-addon-user-manager--{{ style }}">
      {% if users is empty %}
        <h2>{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.NO_RESULTS"|tu }}</h2>
      {% else %}
          {% if style == 'list' %}
          <div class="cell cell--header">
            <div class="user">
              <div class="user__checkbox"><input type="checkbox" id="selectAll" /></div>
              <div class="user__username">{{ "PLUGIN_ADMIN.USERNAME"|tu }}</div>
              <div class="user__email">{{ "PLUGIN_ADMIN.EMAIL"|tu }}</div>
              <div class="user__actions">{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.ACTIONS"|tu }}</div>
            </div>
          </div>
          {% endif %}
          {% for user in users %}
          <div class="cell">
            <div class="user">
              {% if style == 'grid' %}
              <div class="user__avatar"><a href="{{ base_url }}/user-manager/{{ user.username }}"><img src="{{ user.avatarUrl }}" /></a></div>
              {% else %}
              <div class="user__checkbox"><input type="checkbox" name="selected[]" value="{{ user.username }}" /></div>
              {% endif %}
              <div class="user__username"><a href="{{ base_url }}/user-manager/{{ user.username }}">{{ user.username }}</a></div>
              <div class="user__email">{{ user.email }}</div>
              <div class="user__actions">
                <a href="{{ base_url ~ '/user-expert/' ~ user.username }}" class="expert">{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.EXPERT"|tu }}</a>
                <a href="{{ uri.addNonce(base_url ~ '/user-manager/' ~ user.username ~ '/task' ~ ps ~ 'userDelete', 'admin-form', 'admin-nonce') }}" class="delete" onclick="return confirm('{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.USER_CONFIRM_DELETE"|tu }}');">{{ "PLUGIN_ADMIN.DELETE"|tu }}</a>
              </div>
            </div>
          </div>
          {% endfor %}
      {% endif %}
    </div>

    <div class="admin-addon-user-manager-bulk-action">
      <a data-remodal-target="modal-admin-addon-user-manager-bulk" class="button">{{ "PLUGIN_ADMIN_ADDON_USER_MANAGER.BULK_ACTION"|tu }}</a>
    </div>
  </form>

  {{ macros.pagination(pagination, uri.route(true) ~ '/listStyle' ~ ps ~ listStyle, ps, appendUrl) }}

  <div class="remodal" data-remodal-id="modal-admin-addon-user-manager-new" data-remodal-options="hashTracking: false">
    <form method="post" onsubmit='handleAdminAddonUserManagerSubmit(this); return false;'>
      {% for field in fields %}
        {% if field.type %}
          {% if field.name == 'username' %}
          {% set field = field|merge({ validate: field.validate|merge({ pattern: grav.config.system.username_regex })}) %}
          {% endif %}
          <div class="block block-{{field.type}}">
            {% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
          </div>
        {% endif %}
      {% endfor %}

      <div class="button-bar">
        <button class="button primary" >{{ "PLUGIN_ADMIN.CONTINUE"|tu }}</button>
      </div>
    </form>
  </div>

  <div class="remodal" data-remodal-id="modal-admin-addon-user-manager-bulk" data-remodal-options="hashTracking: false">
    <form method="post" onsubmit='handleAdminAddonUserManagerBulkSubmit(this);'>
      {% for field in bulkFields %}
        {% if field.type %}
          {% if field.name == 'groups' %}
          {% set field = field|merge({options: groupnames}) %}
          {% endif %}
          {% if field.name == 'permissions' %}
          {% set field = field|merge({selectize: { options: permissions }}) %}
          {% endif %}
          <div class="block block-{{field.type}}">
            {% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
          </div>
        {% endif %}
      {% endfor %}

      <div class="button-bar">
        <button class="button primary" >{{ "PLUGIN_ADMIN.CONTINUE"|tu }}</button>
      </div>
    </form>
  </div>

  <script>
    function handleAdminAddonUserManagerSubmit(form) {
      var username = form.querySelector('[name=username]').value;
      window.location = '{{ base_url }}/user-manager/' + username;
    }

    var selectAllEle = document.getElementById('selectAll');
    var selectEles = document.querySelectorAll('input[name="selected[]"]');
    selectAllEle.addEventListener('change', function(e) {
      for (var i = 0; i < selectEles.length; i++) {
        selectEles[i].checked = this.checked;
      }
    });

    function handleAdminAddonUserManagerBulkSubmit(form) {
      for (var i = 0; i < selectEles.length; i++) {
        form.appendChild(selectEles[i]);
      }
    }
  </script>
  {% else %}
  <h1>{{ user.username }}</h1>

  {% include 'partials/blueprints.html.twig' with { data: user, blueprints: blueprints } %}

  <div class="remodal" data-remodal-id="changes">
    <form>
      <h1>{{ "PLUGIN_ADMIN.MODAL_CHANGED_DETECTED_TITLE"|tu }}</h1>
      <p class="bigger">
        {{ "PLUGIN_ADMIN.MODAL_CHANGED_DETECTED_DESC"|tu }}
      </p>
      <br>
      <div class="button-bar">
        <a class="button secondary" data-leave-action="cancel" href="#"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</a>
        <a class="button" data-leave-action="continue" href="#"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
      </div>
    </form>
  </div>

  <script>
    $('[name="task"][value$="save"]').on('click._grav', function(event) {
      $(global).off('beforeunload');
    });
  </script>

  <!-- Temporary fix: https://github.com/getgrav/grav-plugin-admin/pull/1379 -->
  <style>
    .permission-container {
      overflow: hidden;
    }
  </style>
  {% endif %}
{% endblock %}