{% extends "base.html" %}
{% load i18n %}


{% block custom_js %}
<script>
  function initSearch(input) {
    const s = _id(input);
    const us = _$('a.panel-block', s.closest('div.panel'));

    s.addEventListener('input', () => {
      const username = s.value.toLowerCase();

      us.forEach(u => {
        if (u.id.includes(username)) {
          u.classList.remove('is-hidden');
        } else {
          u.classList.add('is-hidden');
        }
      });
    });
  }

  initSearch('pwd_search');
  initSearch('cas_search');

</script>
{% endblock %}


{% block content %}

<h1 class="title">{% trans "Liste des comptes" %}</h1>
<hr>

<div class="columns">
  {# Password Accounts #}
  <div class="column is-half">
    <div class="panel">
      <p class="panel-heading is-radiusless">{% trans "Comptes avec mot de passe" %}</p>

      {# Search bar #}
      <div class="panel-block">
        <p class="control has-icons-left">
          <input class="input" type="text" id="pwd_search" placeholder="{% trans "Search" %}">
          <span class="icon is-left">
            <i class="fas fa-search"></i>
          </span>
        </p>
      </div>

      {# List of users #}
      {% for u in pwd_users %}
      <a class="panel-block" href="{% url 'auth.permissions' %}?user={{ u.username }}" id={{ u.base_username|lower }}>
        <div class="level is-mobile is-flex-grow-1">
          <div class="level-left is-flex-shrink-1 pr-3">
            <span class="panel-icon">
              <i class="fas fa-user-cog"></i>
            </span>
            <span class="ml-2" style="overlay=clip">{{ u.full_name }} ({{ u.base_username }})</span>
          </div>

          <div class="level-right">
            <span class="panel-icon has-text-{% if u in e_manager %}primary{% else %}grey-lighter{% endif %}">
              <i class="fas fa-vote-yea"></i>
            </span>

            <span class="panel-icon has-text-{% if u in f_manager %}primary{% else %}grey-lighter{% endif %}">
              <i class="fas fa-question"></i>
            </span>

            <span class="panel-icon has-text-{% if u.is_staff %}danger{% else %}grey-lighter{% endif %}">
              <i class="fas fa-user-shield"></i>
            </span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>

  {# CAS Accounts #}
  <div class="column is-half">
    <div class="panel">
      <p class="panel-heading is-radiusless">{% trans "Comptes CAS" %}</p>

      {# Search bar #}
      <div class="panel-block">
        <p class="control has-icons-left">
          <input class="input" type="text" id="cas_search" placeholder="{% trans "Search" %}">
          <span class="icon is-left">
            <i class="fas fa-search"></i>
          </span>
        </p>
      </div>

      {# List of users #}
      {% for u in cas_users %}
      <a class="panel-block" href="{% url 'auth.permissions' %}?user={{ u.username }}" id={{ u.base_username|lower }}>
        <div class="level is-mobile is-flex-grow-1">
          <div class="level-left is-flex-shrink-1 pr-3">
            <span class="panel-icon">
              <i class="fas fa-user-cog"></i>
            </span>
            <span class="ml-2">{{ u.full_name }} ({{ u.base_username }})</span>
          </div>

          <div class="level-right">
            <span class="panel-icon has-text-{% if u in e_manager %}primary{% else %}grey-lighter{% endif %}">
              <i class="fas fa-vote-yea"></i>
            </span>

            <span class="panel-icon has-text-{% if u in f_manager %}primary{% else %}grey-lighter{% endif %}">
              <i class="fas fa-question"></i>
            </span>

            <span class="panel-icon has-text-{% if u.is_staff %}danger{% else %}grey-lighter{% endif %}">
              <i class="fas fa-user-shield"></i>
            </span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</div>

{% endblock %}