{% extends "base.html" %}
{% block page_title %}Mein Konto{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ current_user.username }}</div>{% endblock %}

{% block content %}

<div class="settings-grid">

  <div class="card card-pad">
    <div class="section-head" style="margin-bottom:16px;">
      <div>
        <h2 style="font-size:16px;">Profil</h2>
        <div class="hint">Name und Profilbild ändern sich in der Sidebar und im Änderungslog.</div>
      </div>
    </div>

    <div style="display:flex; align-items:center; gap:14px; margin-bottom:20px;">
      {% if current_user.avatar_url %}
      <img src="{{ current_user.avatar_url }}" alt="" style="width:56px; height:56px; border-radius:50%; object-fit:cover;">
      {% else %}
      <div class="user-avatar" style="width:56px; height:56px; font-size:18px;">{{ current_user.username[:2]|upper }}</div>
      {% endif %}
      <form method="post" action="{{ url_for('profile') }}" enctype="multipart/form-data" id="avatarForm" style="flex:1;">
        <input type="file" name="avatar" id="avatarInput" accept="image/png,image/jpeg,image/gif,image/webp" style="display:none;" onchange="document.getElementById('avatarForm').requestSubmit();">
        <button type="button" class="btn btn-secondary" style="width:100%;" onclick="document.getElementById('avatarInput').click();">Profilbild ändern</button>
        <input type="hidden" name="upload_avatar" value="1">
      </form>
    </div>

    <form method="post" action="{{ url_for('profile') }}" id="profileForm">
      <div class="field"><label>Vorname</label><input type="text" name="first_name" value="{{ current_user.first_name or '' }}"></div>
      <div class="field"><label>Name</label><input type="text" name="last_name" value="{{ current_user.last_name or '' }}"></div>
      <div class="field"><label>Username</label><input type="text" value="{{ current_user.username }}" disabled></div>
      <button type="submit" name="update_profile" value="1" class="btn btn-primary btn-block">Speichern</button>
    </form>
  </div>

  <div class="card card-pad">
    <div class="section-head" style="margin-bottom:16px;">
      <div>
        <h2 style="font-size:16px;">Passwort ändern</h2>
        <div class="hint">
          {% if current_user.is_ldap_user %}Wird über Active Directory verwaltet.{% else %}Erfordert Eingabe des aktuellen Passworts.{% endif %}
        </div>
      </div>
    </div>
    {% if current_user.is_ldap_user %}
    <p class="text-faint" style="font-size:12.5px;">
      Dieses Konto meldet sich über Active Directory/LDAP an — das Passwort wird dort verwaltet
      und kann in dieser App nicht geändert werden. Bitte das Domänen-Passwort wie gewohnt ändern.
    </p>
    {% else %}
    <form method="post" action="{{ url_for('profile') }}" id="passwordForm">
      <div class="field"><label>Aktuelles Passwort</label><input type="password" name="current_password" autocomplete="current-password"></div>
      <div class="field"><label>Neues Passwort</label><input type="password" name="new_password" autocomplete="new-password"></div>
      <div class="field"><label>Neues Passwort bestätigen</label><input type="password" name="confirm_password" autocomplete="new-password"></div>
      <button type="submit" name="change_password" value="1" class="btn btn-secondary btn-block">Passwort ändern</button>
    </form>
    {% endif %}
  </div>

</div>

{% endblock %}