{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container is-fluid">
    <div class="level">
      <div class="level-left">
        <h3 class="title is-3">
          Nutzer {% if user.role == Role::AreaManager %}für Bereich {{ area.as_ref().unwrap().name }}{% endif %}
        </h3>
      </div>
      <div class="level-right">
        <a class="button is-link is-light" hx-boost="true" href="/users/new">
          <svg class="icon">
            <use href="/static/feather-sprite.svg#plus-circle" />
          </svg>
          <span>Neuen Nutzer anlegen</span>
        </a>
      </div>
    </div>

    <div class="box">
      <table class="table is-fullwidth">
        <thead>
          <tr>
            <th>E-Mail</th>
            <th>Name</th>
            <th>Rolle</th>
            <th>Funktion</th>
            {% if user.role == Role::Admin %}
            <th>Bereich</th>
            {% endif %}
            <th>Letzter Login</th>
            <th>gesperrt</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for u in users %}
          <tr>
            <td>
              {{ u.email }}
            </td>
            <td>
              {{ u.name }}
            </td>
            <td>
              {% match u.role %}
              {% when Role::Staff %}
              <span class="tag is-info is-light">Personal</span>
              {% when Role::AreaManager %}
              <span class="tag is-info is-light">Bereichsleiter</span>
              {% when Role::Admin %}
              <span class="tag is-info">Admin</span>
              {% else %}
              {% endmatch %}
            </td>
            <td>
              {{ u.function|show_tree|safe }}
            </td>
            {% if user.role == Role::Admin %}
            <td>
              {{ u.area.as_ref().unwrap().name }}
            </td>
            {% endif %}
            <td>
              {% if u.last_login.is_some() %}
              {% let format = "%d.%m.%Y %H:%M:%S" %}
              {{ u.last_login.as_ref().unwrap().format(format) }}
              {% else %}
              nie
              {% endif %}
            </td>
            <td>
              <div id="user-{{ u.id }}-locked">
                {% if u.locked %}
                ja
                {% else %}
                nein
                {% endif %}
              </div>
            </td>
            <td>
              {% if user.id != u.id %}
              <div class="buttons is-right">
                <button class="button is-link is-light" hx-post="/users/{{ u.id }}/toggle?field=locked">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#{% if u.locked %}unlock{% else %}lock{% endif %}" />
                  </svg>
                  <span>{% if u.locked %}Entsperren{% else %}Sperren{% endif %}</span>
                </button>
                <a class="button is-primary is-light" hx-boost="true" href="/users/edit/{{ u.id }}">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#edit" />
                  </svg>
                  <span>Bearbeiten</span>
                </a>
                <button id="user-{{ u.id }}-delete" class="button is-danger is-light" {% if !u.locked %}disabled{% endif
                  %} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#x-circle" />
                  </svg>
                  <span>Löschen</span>
                </button>
                {% if u.password.is_none() && u.salt.is_none() && u.last_login.is_none() %}
                <button class="button is-warning is-light" hx-post="/users/{{ u.id }}/resend-registration">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#send" />
                  </svg>
                  <span>Registrierungsmail erneut senden</span>
                </button>
                {% endif %}
              </div>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}