{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <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" href="/users/new">Neuen Nutzer anlegen</a>
      </div>
    </div>

    {% if users.len() == 0 %}
    <div class="box">
      <h5 class="title is-5">keine Nutzer vorhanden</h5>
    </div>
    {% else %}
    <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 id="user-{{ u.id }}">
            <td>
              {{ u.email }}
            </td>
            <td>
              {{ u.name }}
            </td>
            <td>
              {% match u.role %}
                {% when Role::Staff %}
                  <span class="tag is-info is-light">Nutzer</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>
              {% match u.function %}
                {% when Function::Posten %}
                  <span class="tag is-info is-light">Posten</span>
                {% when Function::Wachhabender %}
                  <span class="tag is-info">Wachhabender</span>
                {% else %}
              {% endmatch %}
            </td>
            {% if user.role == Role::Admin %}
            <td>
              {{ u.area.as_ref().unwrap().name }}
            </td>
            {% endif %}
            <td>
            {% if u.last_login.is_some() %}
              {{ u.last_login.as_ref().unwrap() }}
            {% else %}
              nie
            {% endif %}
            </td>
            <td>
            {% if u.locked %}
              ja
            {% else %}
              nein
            {% endif %}
            </td>
            <td>
              <div class="buttons is-right">
                <button class="button is-link is-light" name="toggle-lock-user">{% if u.locked %}Entsperren{% else %}Sperren{% endif %}</button>
                <a class="button is-link" href="/users/edit/{{ u.id }}">Bearbeiten</a>
                <button class="button is-danger" {% if !u.locked %}disabled{% endif %} name="delete-user">Löschen</button>
              </div>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>
</section>
</section>

<script>
  document.getElementsByName("delete-user")
    .forEach(ele => ele.addEventListener("click", (event) => {
      const id = event.target.closest("tr").id.split('-')[1];
      event.target.classList.add("is-loading");

      fetch(`/users/delete/${id}`, { method: "DELETE"})
        .then(response => {
          if (response.status == 204) {
            document.getElementById(`user-${id}`).remove()
          } else {
            event.target.classList.remove("is-loading");
            console.log("Fehler beim Löschen.")
          }
        });
    }));

  document.getElementsByName("toggle-lock-user")
    .forEach(ele => ele.addEventListener("click", (event) => {
      const id = event.target.closest("tr").id.split('-')[1];
      event.target.classList.add("is-loading");

      const locked = event.target.innerHTML == "Sperren" ? false : true;

      fetch(`/users/edit/${id}`, { 
        method: "PATCH",
        headers: new Headers({
          "Content-Type": "application/json-patch+json",
        }),
        body: JSON.stringify([
          {
            "op": "replace",
            "path": "/locked",
            "value": !locked
          }
        ])
      })
        .then(response => {
          if (response.status == 200) {
            event.target.classList.remove("is-loading");
            if (locked) {
              event.target.innerHTML = "Sperren";
              event.target.closest("tr").querySelector("td:nth-last-child(2)").innerHTML = "nein"
              event.target.closest("div.buttons").querySelector("button:nth-last-child(1)").setAttribute("disabled", "");
            } else {
              event.target.innerHTML = "Entsperren";
              event.target.closest("tr").querySelector("td:nth-last-child(2)").innerHTML = "ja"
              event.target.closest("div.buttons").querySelector("button:nth-last-child(1)").removeAttribute("disabled");
            }
          } else {
            event.target.classList.remove("is-loading");
            console.log("Fehler beim PATCH.")
          }
        });
    }));
</script>
{% endblock %}