{% extends "dialog_core.html" %}
{% import 'partials/components/ui_macros.html' as ui %}

{% block dialog_width %}420{% endblock %}
{% block dialog_title %}Eigenschaften – {{ user.display_name or user.username }}{% endblock %}

{% block dialog_body %}
<input type="hidden" id="users-edit-id" value="{{ user.id }}">
{% call ui.form_group('Benutzername') %}
  {{ ui.form_input('username', user.username, attrs='id="users-edit-username" autocomplete="off"') }}
{% endcall %}
{% call ui.form_group('Anzeigename') %}
  {{ ui.form_input('display_name', user.display_name, attrs='id="users-edit-display-name" autofocus autocomplete="off"') }}
{% endcall %}
{% call ui.form_group('Rolle') %}
  {{ ui.form_select('role', [
       {'value': 'user', 'label': 'Nutzer'},
       {'value': 'admin', 'label': 'Administrator'},
     ], 'admin' if user.is_admin else 'user', placeholder='', attrs='id="users-edit-role"' ~ (' disabled' if locked else '')) }}
{% endcall %}
{% if locked %}
<span class="form-help">Es muss mindestens ein aktiver Administrator bestehen bleiben -- Rolle und Aktiviert-Status lassen sich hier deshalb nicht ändern.</span>
{% elif is_self %}
<span class="form-help">Der eigene Account lässt sich hier nicht deaktivieren.</span>
{% endif %}

<div class="form-group" style="margin-top:14px;">
  <label class="form-label">Passkeys</label>
  <div id="users-edit-credentials">
    {% if credentials %}
      {% for cred in credentials %}
      <div class="users-cred-row" id="users-cred-{{ cred.id }}" style="display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border-s);">
        <span style="font-size:13px;">{{ cred.label or 'Passkey' }}
          <span style="color:var(--text-3); font-size:11px;">— eingerichtet {{ cred.created_at[:10] }}{% if cred.last_used_at %}, zuletzt genutzt {{ cred.last_used_at[:10] }}{% endif %}</span>
        </span>
        <button type="button" class="btn-icon btn-icon-danger" title="Passkey entfernen"
                onclick="usersDeleteCredential({{ user.id }}, {{ cred.id }}, '{{ (cred.label or 'Passkey') | e }}')">
          {{ ui.icon("trash") }}
        </button>
      </div>
      {% endfor %}
    {% else %}
    <span class="form-help">Kein Passkey eingerichtet.</span>
    {% endif %}
  </div>
</div>

<p id="users-edit-error" style="display:none; color:var(--error,#ff6b6b); font-size:13px; margin-top:8px;"></p>
{% endblock %}

{% block dialog_footer %}
{% set _enabled_val = user.enabled | default(True) %}
<div class="ds-modal-footer">
  <label class="toggle-field"{% if locked or is_self %} style="pointer-events:none; opacity:.5;"{% endif %}>
    <input type="hidden" id="users-edit-enabled" value="{{ '1' if _enabled_val else '0' }}">
    <button type="button"
            class="toggle-switch {{ 'toggle-on' if _enabled_val else 'toggle-off' }}"
            onclick="var i=document.getElementById('users-edit-enabled');var on=i.value!=='1';i.value=on?'1':'0';this.classList.toggle('toggle-on',on);this.classList.toggle('toggle-off',!on);this.nextElementSibling.textContent=on?'Aktiviert':'Deaktiviert';">
      <span class="toggle-knob"></span>
    </button>
    <span class="toggle-field-label">{{ 'Aktiviert' if _enabled_val else 'Deaktiviert' }}</span>
  </label>
  <div class="modal-actions">
    <button type="button" class="btn btn-sm btn-ghost" onclick="closeModal(this)">Abbrechen</button>
    <button type="button" class="btn btn-sm btn-primary" onclick="usersEditSubmit(this)">Speichern</button>
  </div>
</div>
{% endblock %}