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


{% block extra_head %}
<script>
  function initSearch(input) {
    const $search = document.getElementById(input);
    const $users = $search.closest('div.panel').querySelectorAll('a.panel-block') || [];

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

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

  document.addEventListener('DOMContentLoaded', () => {
    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 }}>
        <span class="panel-icon">
          <i class="fas fa-user-cog"></i>
        </span>
        <span class="ml-2">{{ u.full_name }} ({{ u.base_username }})</span>
      </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 }}>
        <span class="panel-icon">
          <i class="fas fa-user-cog"></i>
        </span>
        <span class="ml-2">{{ u.full_name }} ({{ u.base_username }})</span>
      </a>
      {% endfor %}
    </div>
  </div>
</div>

{% endblock %}