{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <h1 class="title">Profil</h1>

    <div class="field">
      <label class="label">Name</label>
      <div class="control">
        <input class="input" type="text" value="{{ user.name }}" readonly>
      </div>
    </div>

    <div class="field">
      <label class="label">E-Mail</label>
      <div class="control">
        <input class="input" type="email" value="{{ user.name }}" readonly>
      </div>
    </div>

    <div class="field">
      <label class="label">Rolle</label>
      <div class="control">
        {% match user.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 %}
      </div>
    </div>

    <div class="field">
      <label class="label">Funktion</label>
      <div class="control">
        {% match user.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 %}
      </div>
    </div>

    <div class="field">
      <label class="label">Bereich</label>
      <div class="control">
        <input class="input" type="text" value="{{ user.area.as_ref().unwrap().name }}" readonly>
      </div>
    </div>


    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input hx-post="/users/{{ user.id }}/toggle?field=receiveNotifications" type="checkbox"
            hx-on::before-request="document.getElementById('success').classList.remove('fadeout')"
            hx-on::after-request="document.getElementById('success').classList.add('fadeout')"
            checked="{{ user.receive_notifications }}">
          Ich möchte E-Mail Benachrichtungen zu neuen Brasiwa-Einteilungen erhalten.
          <span id="success" class="result">
            <span class="icon mr-2">
              <svg class="feather">
                <use href="/static/feather-sprite.svg#check" />
              </svg>
            </span>
            <span>
              gespeichert
            </span>
          </span>
        </label>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <button hx-get="/users/changepassword" hx-target="closest div.field" hx-swap="outerHTML"
          class="button is-link is-light">Passwort ändern</button>
      </div>
    </div>

  </div>
</section>
{% endblock %}