{% 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">Kto i skąd jest zalogowany do panelu.</p>{% 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">Konto</th>
          <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.user.get_full_name|default:item.user.username }}</span>
              <span class="text-xs text-slate-400">{{ item.user.username }}</span>
            </td>
            <td class="td">
              {{ item.device }}
              {% 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">
                {% if item.can_manage %}
                  <form method="post" action="{% url 'panel:users:session_end' item.pk %}"
                        data-confirm="Zakończyć sesje konta {{ item.user.username }}?">
                    {% 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>
                {% else %}
                  <span class="text-xs text-slate-400">tylko administrator</span>
                {% endif %}
              </div>
            </td>
          </tr>
        {% empty %}
          <tr><td class="td py-10 text-center text-slate-500" colspan="6">Nikt nie jest teraz zalogowany do panelu.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<p class="text-xs text-slate-500 dark:text-slate-400">
  Lista pokazuje najwyżej {{ limit }} ostatnio używanych sesji. Sesja wygasła
  znika z niej sama przy następnym wejściu na tę stronę. Zakończenie sesji
  działa od razu: kolejne żądanie z tamtej przeglądarki jest już anonimowe.
</p>
{% endblock %}