{% extends 'panel/base.html' %}

{% block panel_title %}{% if object %}Edycja użytkownika{% else %}Nowy użytkownik{% endif %}{% endblock %}
{% block heading %}{% if object %}{{ object.username }}{% else %}Nowy użytkownik{% endif %}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">{% if object %}Edycja istniejącego konta.{% else %}Zakładanie konta z dostępem do panelu.{% endif %}</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'panel:users:index' %}">Wróć do listy</a>{% endblock %}

{% block content %}
<div class="card max-w-2xl">
  <form method="post" novalidate class="card-body space-y-6">
    {% csrf_token %}
    <div class="space-y-4">
      {% if form.non_field_errors %}
        <div class="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
          {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
        </div>
      {% endif %}
      {% for field in form %}
        {% if field.name != 'roles' %}{% include 'panel/partials/field.html' %}{% endif %}
      {% endfor %}

      {% comment %}Role wypisujemy osobno - lista pól wyboru nie mieści się
         w układzie pojedynczego checkboxa z partiala.{% endcomment %}
      <div class="border-t border-slate-200 pt-4 dark:border-slate-800">
        <span class="label">{{ form.roles.label }}</span>
        <p class="help">{{ form.roles.help_text }}</p>
        {% for error in form.roles.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
        <div class="mt-2 space-y-2">
          {% for item in form.roles %}
            <label class="flex items-start gap-3 text-sm" for="{{ item.id_for_label }}">
              <span class="pt-0.5">{{ item.tag }}</span>
              <span class="min-w-0">{{ item.choice_label }}</span>
            </label>
          {% empty %}
            <p class="text-sm text-slate-500 dark:text-slate-400">
              Nie ma jeszcze żadnej roli - <a class="text-brand-600 hover:underline" href="{% url 'panel:roles:index' %}">załóż ją w sekcji Role i uprawnienia</a>.
            </p>
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="flex gap-2 border-t border-slate-200 pt-4 dark:border-slate-800">
      {% include "panel/partials/dirty-note.html" %}
      <button class="btn-primary" type="submit">Zapisz</button>
      <a class="btn-ghost" href="{% url 'panel:users:index' %}">Anuluj</a>
    </div>
  </form>
</div>

{% if object %}
  {% comment %}Drugiego składnika nie da się stąd włączyć - sekret powstaje
     wyłącznie u właściciela konta. Administrator może go tylko zdjąć, gdy
     ktoś zgubił telefon (albo dostęp do poczty) i kody zapasowe.{% endcomment %}
  <div class="card mt-6 max-w-2xl">
    <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800"><h2 class="font-semibold">Logowanie dwuetapowe</h2></div>
    <div class="card-body flex flex-wrap items-center gap-4 text-sm">
      {% if object.two_factor.is_confirmed %}
        <span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">włączone</span>
        <span class="text-slate-500 dark:text-slate-400">
          {{ object.two_factor.get_method_display }}, od {{ object.two_factor.confirmed_at|date:"d.m.Y H:i" }},
          kody zapasowe: {{ object.two_factor.codes_left }}
        </span>
        <form method="post" action="{% url 'panel:users:two_factor_off' object.pk %}"
              data-confirm="Wyłączyć logowanie dwuetapowe konta {{ object.username }}? Konto zaloguje się potem samym hasłem.">
          {% csrf_token %}
          <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Wyłącz</button>
        </form>
      {% else %}
        <span class="badge bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200">wyłączone</span>
        <span class="text-slate-500 dark:text-slate-400">
          Włącza je samo konto: Moje konto &rsaquo; Logowanie dwuetapowe.
        </span>
      {% endif %}
    </div>
  </div>
{% endif %}
{% endblock %}