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

{% block panel_title %}Mój profil{% endblock %}
{% block heading %}Mój profil{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Dane własnego konta i zmiana hasła.</p>{% endblock %}

{% block content %}
<div class="grid gap-6 lg:grid-cols-2">
  <section class="card">
    <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800"><h2 class="font-semibold">Dane konta</h2></div>
    <form method="post" novalidate class="card-body space-y-6">
      {% csrf_token %}
      <input type="hidden" name="action" value="profile">
      {% with form=profile_form %}{% include 'panel/partials/form.html' %}{% endwith %}
      {% include "panel/partials/dirty-note.html" %}
      <button class="btn-primary" type="submit">Zapisz dane</button>
    </form>
  </section>

  <section class="card">
    <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800"><h2 class="font-semibold">Zmiana hasła</h2></div>
    <form method="post" novalidate class="card-body space-y-6">
      {% csrf_token %}
      <input type="hidden" name="action" value="password">
      {% with form=password_form %}{% include 'panel/partials/form.html' %}{% endwith %}
      <button class="btn-primary" type="submit">Zmień hasło</button>
    </form>
  </section>

  <section class="card lg:col-span-2">
    <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800"><h2 class="font-semibold">Bezpieczeństwo konta</h2></div>
    <div class="card-body flex flex-wrap items-center gap-4 text-sm">
      <span>Logowanie dwuetapowe:</span>
      {% if two_factor %}
        <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">{{ two_factor.get_method_display }}, kody zapasowe: {{ two_factor.codes_left }}</span>
      {% else %}
        <span class="badge bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200">wyłączone</span>
      {% endif %}
      <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:profile:twofactor' %}">Ustaw</a>
      <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:profile:sessions' %}">Aktywne sesje</a>
    </div>
  </section>
</div>
{% endblock %}