{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import field, alert, pill, empty_state %}

{% block page_title %}Mein Konto{% endblock %}
{% block page_sub %}{{ current_user.username }} · {{ current_user.role_label }}{% endblock %}

{% block topbar_extra %}
  <a class="btn btn--sm" href="{{ url_for('account.security') }}">{{ icon('lock', size=15) }} Sicherheit</a>
{% endblock %}

{% block content %}
<div class="grid grid--split">
  <div class="stack">
    <section class="card">
      <div class="card__header">
        <div class="flex-1"><div class="card__title">{{ icon('users', size=17) }} Stammdaten</div></div>
      </div>
      <form method="post" action="{{ url_for('account.update_profile') }}">
        <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
        <div class="card__body">
          {% if current_user.is_directory_account %}
            {{ alert('Ihre Stammdaten kommen aus dem Verzeichnisdienst und werden bei jeder
            Anmeldung übernommen.', 'info') }}
          {% endif %}
          <div class="form-grid">
            {{ field('first_name', 'Vorname', value=profile.first_name,
                     disabled=current_user.is_directory_account) }}
            {{ field('last_name', 'Nachname', value=profile.last_name,
                     disabled=current_user.is_directory_account) }}
            {{ field('email', 'E-Mail', value=profile.email, type='email',
                     disabled=current_user.is_directory_account, extra_class='field--full') }}
          </div>
        </div>
        {% if not current_user.is_directory_account %}
          <div class="card__footer"><button class="btn btn--primary" type="submit">Speichern</button></div>
        {% endif %}
      </form>
    </section>

    <section class="card">
      <div class="card__header">
        <div class="flex-1">
          <div class="card__title">{{ icon('shield', size=17) }} Meine wirksamen Rechte</div>
          <div class="card__sub">
            Vereinigung aller Gruppen, nach Anwendung der Bereichsschalter
          </div>
        </div>
      </div>
      <div class="card__body">
        {% if current_user.is_admin %}
          {{ alert('Sie sind Administrator und dürfen unabhängig von Gruppen alles.', 'warning') }}
        {% elif permissions %}
          <div class="row row--tight">
            {% for permission in permissions %}
              <span class="badge" title="{{ permission }}">{{ tree.label_for(permission) }}</span>
            {% endfor %}
          </div>
        {% else %}
          {{ empty_state('Keine Rechte', 'Sie sehen nur diese Kontoseite.', 'lock') }}
        {% endif %}
      </div>
    </section>
  </div>

  <div class="stack">
    <section class="card">
      <div class="card__header">
        <div class="flex-1"><div class="card__title">{{ icon('grid', size=17) }} Profilbild</div></div>
      </div>
      <div class="card__body stack">
        <div class="row">
          {% if profile.avatar_filename %}
            <img class="avatar avatar--lg"
                 src="{{ url_for('account.avatar', filename=profile.avatar_filename) }}" alt="">
          {% else %}
            <span class="avatar avatar--lg" aria-hidden="true">{{ current_user.initials }}</span>
          {% endif %}
          <div class="fs-sm muted">PNG, JPG, WEBP oder GIF, maximal 2&nbsp;MB.</div>
        </div>
        <form method="post" action="{{ url_for('account.upload_avatar') }}"
              enctype="multipart/form-data" class="stack stack--tight" data-no-guard>
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <input class="input" type="file" name="avatar" accept="image/png,image/jpeg,image/webp,image/gif" required>
          <button class="btn btn--sm" type="submit">Hochladen</button>
        </form>
      </div>
    </section>

    <section class="card">
      <div class="card__header">
        <div class="flex-1"><div class="card__title">{{ icon('shield-users', size=17) }} Gruppen</div></div>
      </div>
      <div class="card__body">
        {% if groups %}
          <div class="row row--tight">
            {% for group in groups %}{{ pill(group.name, 'accent' if group.is_default else '') }}{% endfor %}
          </div>
        {% else %}
          <p class="faint fs-sm">Keiner Gruppe zugeordnet.</p>
        {% endif %}
      </div>
    </section>

    <section class="card">
      <div class="card__header">
        <div class="flex-1"><div class="card__title">{{ icon('info', size=17) }} Konto</div></div>
      </div>
      <div class="card__body">
        <dl class="kv fs-sm">
          <dt>Benutzername</dt><dd class="mono">{{ current_user.username }}</dd>
          <dt>Quelle</dt><dd>{{ 'Verzeichnisdienst' if current_user.is_directory_account else 'Lokal' }}</dd>
          <dt>Zwei-Faktor</dt>
          <dd>{% if profile.totp_secret %}{{ pill('aktiv', 'online') }}{% else %}{{ pill('inaktiv', 'warning') }}{% endif %}</dd>
          <dt>Angelegt</dt><dd>{{ profile.created_at | dt }}</dd>
          <dt>Letzte Anmeldung</dt><dd>{{ profile.last_login_at | dt }}</dd>
        </dl>
      </div>
    </section>
  </div>
</div>
{% endblock %}