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

{% block panel_title %}Aktywne sesje{% endblock %}
{% block heading %}Aktywne sesje{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Urządzenia zalogowane na tym koncie.</p>{% endblock %}
{% block actions %}
  {% if items|length > 1 %}
    <form method="post" action="{% url 'panel:profile:sessions_end_others' %}"
          data-confirm="Zakończyć wszystkie sesje poza bieżącą?">
      {% csrf_token %}
      <button class="btn-danger" type="submit">Zakończ pozostałe</button>
    </form>
  {% endif %}
{% endblock %}

{% block content %}
<section class="card overflow-hidden">
  <div class="overflow-x-auto">
    <table class="table">
      <thead class="bg-slate-50 dark:bg-slate-900/60">
        <tr>
          <th class="th">Urządzenie</th>
          <th class="th">Adres IP</th>
          <th class="th">Zalogowano</th>
          <th class="th">Ostatnio widziano</th>
          <th class="th text-right">Akcje</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for item in items %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td">
              <span class="block font-medium">{{ item.device }}</span>
              {% if item.is_this_one %}
                <span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">ta sesja</span>
              {% endif %}
            </td>
            <td class="td whitespace-nowrap">{{ item.ip|default:"-" }}</td>
            <td class="td whitespace-nowrap">{{ item.created_at|date:"d.m.Y H:i" }}</td>
            <td class="td whitespace-nowrap">{{ item.last_seen_at|date:"d.m.Y H:i" }}</td>
            <td class="td">
              <div class="flex justify-end">
                <form method="post" action="{% url 'panel:profile:session_end' item.pk %}"
                      data-confirm="Zakończyć te sesje?">
                  {% csrf_token %}
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit">
                    {% if item.is_this_one %}Wyloguj{% else %}Zakończ{% endif %}
                  </button>
                </form>
              </div>
            </td>
          </tr>
        {% empty %}
          <tr><td class="td py-10 text-center text-slate-500" colspan="5">Brak zapisanych sesji.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<p class="text-xs text-slate-500 dark:text-slate-400">
  Sesja znika z listy sama, gdy wygaśnie - czas bezczynności ustawia się
  w Ustawieniach serwisu, zakładka Dostęp. Opis urządzenia pochodzi z nagłówka
  przeglądarki, więc służy tylko do rozpoznania własnego komputera.
</p>
{% endblock %}