{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Profil" %}{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/account.css' %}" />
{% endblock %}

{% block shell_body %}
<section class="account-shell-body">
  <div class="account-page">
    <section class="account-hero">
      <div class="account-hero-copy">
        <span class="account-kicker">{% trans "Konto" %}</span>
        <h1>{% trans "Profil" %}</h1>
        <p>{% trans "Ihre aktuelle Workdock-Kontoübersicht und wichtige Sicherheitsaktionen." %}</p>
      </div>
    </section>

    <div class="account-layout">
      <aside class="account-profile-card">
        <form class="account-avatar-form" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <input type="hidden" name="account_form" value="avatar" />
          <label class="account-avatar-wrap" for="{{ avatar_form.avatar_image.id_for_label }}">
            {% if account_user_profile.avatar_image %}
              <img class="account-avatar-image" src="{{ account_user_profile.avatar_image.url }}" alt="{% trans 'Profilbild' %}" />
            {% else %}
              <div class="account-avatar" aria-hidden="true">
                {% if account_user.first_name or account_user.last_name %}
                  {{ account_user.first_name|slice:":1" }}{{ account_user.last_name|slice:":1" }}
                {% else %}
                  {{ account_user.username|slice:":2" }}
                {% endif %}
              </div>
            {% endif %}
            <span class="account-avatar-edit" aria-hidden="true">✎</span>
          </label>
          <div class="account-avatar-input" hidden>
            {{ avatar_form.avatar_image }}
          </div>
          {% if avatar_form.avatar_image.errors %}
          <div class="account-avatar-error">{{ avatar_form.avatar_image.errors|join:", " }}</div>
          {% endif %}
          <p class="account-avatar-hint">{% trans "Klicken Sie auf das Bild, um ein neues Profilbild auszuwählen." %}</p>
        </form>
        <div class="account-profile-copy">
          <h2>{{ account_user.get_full_name|default:account_user.username }}</h2>
          <p>{{ account_user.email|default:account_user.username }}</p>
        </div>
        <div class="account-profile-meta">
          <div>
            <span>{% trans "Position" %}</span>
            <strong>{{ account_user_profile.job_title|default:"-" }}</strong>
          </div>
          <div>
            <span>{% trans "Abteilung" %}</span>
            <strong>{{ account_user_profile.department|default:"-" }}</strong>
          </div>
          <div>
            <span>{% trans "Letzte Anmeldung" %}</span>
            <strong>{% if account_user.last_login %}{{ account_user.last_login|date:"d.m.Y H:i" }}{% else %}-{% endif %}</strong>
          </div>
        </div>
      </aside>

      <div class="account-main">
        <section class="account-panel">
          <div class="account-panel-head">
            <div>
              <h2>{% trans "Kontodaten" %}</h2>
              <p>{% trans "Die wichtigsten Stammdaten Ihres aktuellen Kontos." %}</p>
            </div>
            <button
              class="btn btn-secondary account-inline-edit-trigger"
              type="button"
              data-account-edit-toggle="details"
              aria-expanded="{% if account_edit_open %}true{% else %}false{% endif %}"
            >
              {% trans "Bearbeiten" %}
            </button>
          </div>

          <div class="account-inline-view{% if account_edit_open %} is-hidden{% endif %}" data-account-edit-view="details">
            <div class="account-detail-grid">
              <div class="account-detail">
                <span>{% trans "Name" %}</span>
                <strong>{{ account_user.get_full_name|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "E-Mail" %}</span>
                <strong>{{ account_user.email|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Vorname" %}</span>
                <strong>{{ account_user.first_name|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Nachname" %}</span>
                <strong>{{ account_user.last_name|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Telefon" %}</span>
                <strong>{{ account_user_profile.phone_number|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Mobil" %}</span>
                <strong>{{ account_user_profile.mobile_number|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Position" %}</span>
                <strong>{{ account_user_profile.job_title|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Abteilung" %}</span>
                <strong>{{ account_user_profile.department|default:"-" }}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Standort" %}</span>
                <strong>{{ account_user_profile.location|default:"-" }}</strong>
              </div>
              <div class="account-detail account-detail-wide">
                <span>{% trans "Hinweise" %}</span>
                <strong>{{ account_user_profile.contact_notes|default:"-" }}</strong>
              </div>
            </div>
          </div>

          <form
            class="account-inline-form{% if not account_edit_open %} is-hidden{% endif %}"
            method="post"
            data-account-edit-form="details"
          >
            {% csrf_token %}
            <input type="hidden" name="account_form" value="details" />
            <div class="account-form-grid">
              {% for field in details_form %}
              <div class="account-form-field{% if field.name == 'contact_notes' %} account-form-field-wide{% endif %}{% if field.errors %} has-error{% endif %}">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% if field.errors %}
                <div class="account-form-error">{{ field.errors|join:", " }}</div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
            <div class="account-inline-actions">
              <button class="btn btn-primary" type="submit">{% trans "Speichern" %}</button>
              <button class="btn btn-secondary" type="button" data-account-edit-cancel="details">{% trans "Abbrechen" %}</button>
            </div>
          </form>
        </section>

        <section class="account-panel">
          <div class="account-panel-head">
            <h2>{% trans "Sicherheit & Aktionen" %}</h2>
          </div>

          <div class="account-security-overview">
            <div class="account-security-item">
              <span>{% trans "TOTP" %}</span>
              <strong>{% if account_user_profile.totp_enabled %}{% trans "Aktiv" %}{% else %}{% trans "Aus" %}{% endif %}</strong>
              <p>
                {% if account_user_profile.totp_enabled %}
                {% trans "Anmeldung wird zusätzlich mit einem zweiten Faktor geschützt." %}
                {% else %}
                {% trans "Optional. Kann bei Bedarf direkt unten aktiviert werden." %}
                {% endif %}
              </p>
            </div>
            <div class="account-security-item">
              <span>{% trans "Recovery-Codes" %}</span>
              <strong>
                {% if account_user_profile.totp_enabled %}
                  {{ account_user_profile.totp_recovery_codes|length }}
                {% else %}
                  -
                {% endif %}
              </strong>
              <p>
                {% if account_user_profile.totp_enabled %}
                {% trans "Einmal-Codes für Notfälle oder verlorene Authenticator-Geräte." %}
                {% else %}
                {% trans "Werden automatisch erzeugt, sobald TOTP aktiviert wird." %}
                {% endif %}
              </p>
            </div>
          </div>

          <div class="account-totp-card">
            <div class="account-panel-head">
              <div>
                <h3>{% trans "Zwei-Faktor-Authentifizierung" %}</h3>
                <p>{% trans "Aktivieren Sie TOTP mit einer Authenticator-App. Standardmäßig bleibt es ausgeschaltet." %}</p>
              </div>
              <span class="account-chip{% if not account_user_profile.totp_enabled %} account-chip-muted{% endif %}">
                {% if account_user_profile.totp_enabled %}
                {% trans "Aktiv" %}
                {% else %}
                {% trans "Aus" %}
                {% endif %}
              </span>
            </div>

            {% if account_user_profile.totp_enabled %}
            <div class="account-detail-grid">
              <div class="account-detail">
                <span>{% trans "Status" %}</span>
                <strong>{% trans "TOTP ist aktiviert." %}</strong>
              </div>
              <div class="account-detail">
                <span>{% trans "Bestätigt am" %}</span>
                <strong>{% if account_user_profile.totp_confirmed_at %}{{ account_user_profile.totp_confirmed_at|date:"d.m.Y H:i" }}{% else %}-{% endif %}</strong>
              </div>
            </div>
            <form class="account-totp-form" method="post">
              {% csrf_token %}
              <input type="hidden" name="account_form" value="totp_disable" />
              <div class="account-form-grid">
                {% for field in totp_disable_form %}
                <div class="account-form-field{% if field.errors %} has-error{% endif %}">
                  <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                  {% if field.errors %}
                  <div class="account-form-error">{{ field.errors|join:", " }}</div>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
              <div class="account-inline-actions">
                <button class="btn btn-secondary" type="submit">{% trans "TOTP deaktivieren" %}</button>
              </div>
            </form>
            <form class="account-totp-form" method="post">
              {% csrf_token %}
              <input type="hidden" name="account_form" value="totp_regenerate_codes" />
              <div class="account-form-grid">
                {% for field in totp_regenerate_form %}
                <div class="account-form-field{% if field.errors %} has-error{% endif %}">
                  <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                  {% if field.errors %}
                  <div class="account-form-error">{{ field.errors|join:", " }}</div>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
              <div class="account-inline-actions">
                <button class="btn btn-primary" type="submit">{% trans "Recovery-Codes neu erzeugen" %}</button>
              </div>
            </form>
            {% else %}
            <div class="account-qr-card">
              {% if totp_qr_svg %}
              {{ totp_qr_svg|safe }}
              {% endif %}
              <div class="account-secret-panel">
                <div class="account-secret-head">
                  <div>
                    <span>{% trans "Manueller Schlüssel" %}</span>
                    <strong>{% trans "Nur bei Bedarf anzeigen" %}</strong>
                  </div>
                  <button
                    class="btn btn-secondary account-secret-toggle"
                    type="button"
                    data-secret-toggle
                    aria-expanded="false"
                    aria-controls="totp-manual-secret"
                    title="{% trans 'Manuellen Schlüssel anzeigen oder ausblenden' %}"
                  >
                    <span data-secret-toggle-icon>◐</span>
                  </button>
                </div>
                <div class="account-secret-body is-hidden" id="totp-manual-secret" data-secret-body>
                  <strong class="account-secret">{{ totp_pending_secret }}</strong>
                </div>
              </div>
            </div>
            <p class="mini">{% trans "Scannen Sie den QR-Code mit Ihrer Authenticator-App. Den manuellen Schlüssel können Sie bei Bedarf einblenden." %}</p>
            <form class="account-totp-form" method="post">
              {% csrf_token %}
              <input type="hidden" name="account_form" value="totp_enable" />
              <div class="account-form-grid">
                {% for field in totp_enable_form %}
                <div class="account-form-field{% if field.errors %} has-error{% endif %}">
                  <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                  {% if field.errors %}
                  <div class="account-form-error">{{ field.errors|join:", " }}</div>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
              <div class="account-inline-actions">
                <button class="btn btn-primary" type="submit">{% trans "TOTP aktivieren" %}</button>
              </div>
            </form>
            {% endif %}

            {% if totp_recovery_codes %}
            <div class="account-recovery-card">
              <div class="account-panel-head">
                <div>
                  <h3>{% trans "Recovery-Codes" %}</h3>
                  <p>{% trans "Diese Codes werden nur jetzt im Klartext angezeigt. Jeden Code können Sie genau einmal verwenden." %}</p>
                </div>
              </div>
              <div class="account-recovery-grid">
                {% for code in totp_recovery_codes %}
                <div class="account-recovery-code">{{ code }}</div>
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </section>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
  (function () {
    var toggle = document.querySelector('[data-account-edit-toggle="details"]');
    var cancel = document.querySelector('[data-account-edit-cancel="details"]');
    var view = document.querySelector('[data-account-edit-view="details"]');
    var form = document.querySelector('[data-account-edit-form="details"]');
    var secretToggle = document.querySelector('[data-secret-toggle]');
    var secretBody = document.querySelector('[data-secret-body]');
    var secretIcon = document.querySelector('[data-secret-toggle-icon]');
    if (!toggle || !cancel || !view || !form) return;

    function setMode(editing) {
      view.classList.toggle('is-hidden', editing);
      form.classList.toggle('is-hidden', !editing);
      toggle.setAttribute('aria-expanded', editing ? 'true' : 'false');
    }

    toggle.addEventListener('click', function () {
      setMode(true);
    });

    cancel.addEventListener('click', function () {
      setMode(false);
    });

    if (secretToggle && secretBody) {
      secretToggle.addEventListener('click', function () {
        var isOpen = secretToggle.getAttribute('aria-expanded') === 'true';
        secretToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
        secretBody.classList.toggle('is-hidden', isOpen);
        if (secretIcon) {
          secretIcon.textContent = isOpen ? '◐' : '◑';
        }
      });
    }
  }());
</script>
{% endblock %}