{% extends 'layout.html' %}
{% from 'include/session.html' import browser, os, icon %}
{% set breadcrumbs = breadcrumb_page('prefs') +  breadcrumb_page(self) %}
{% block content %}
  <div class="rdw-container">
    <div class="mb-2 py-2 border-bottom">
      <h2>{{ active_page.label }}</h2>
    </div>
    <p>
      {% trans %}This is a list of devices currently logged into your account. You may revoke any session you do not recognise — except your current one. {% endtrans %}
    </p>
    <!-- List of sessions-->
    <div class="d-flex flex-column gap-3">
      {% for session in active_sessions %}
        {% set browser_name = browser(session.user_agent).strip() %}
        <div class="card border shadow-sm">
          <div class="card-body p-4">
            <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
              <!-- Left: icon + details -->
              <div class="d-flex gap-3 align-items-start">
                <div class="rounded-3 bg-primary bg-opacity-10 p-3 flex-shrink-0">
                  <RdwIcon :value="icon(session.user_agent)" class="text-primary fs-3" />
                </div>
                <div>
                  <div class="d-flex align-items-center gap-2 flex-wrap mb-1">
                    <p class="mb-0" title="{{ session.user_agent }}">
                      <span class="fw-semibold">{{ browser_name }}</span>
                      <span class="text-muted small">{% trans %}on{% endtrans %}</span>
                      <span class="fw-semibold">{{ os(session.user_agent) }}</span>
                    </p>
                    {% if session.current %}
                      <span class="badge bg-success rounded-pill px-2 py-1">{% trans %}current session{% endtrans %}</span>
                    {% endif %}
                    {% if session.login_persistent %}
                      <span class="badge bg-info rounded-pill px-2 py-1">{% trans %}persistent{% endtrans %}</span>
                    {% endif %}
                  </div>
                  <ul class="list-unstyled text-muted small mb-0">
                    <li class="mb-1">
                      <RdwIcon value=" bi-clock" class="bi-fw me-1" />
                      {%- trans %}Last accessed{% endtrans %}
                      <strong class="text-body">
                        <RdwTime :value="session.access_time" />
                      </strong>
                      {% trans %}from{% endtrans %}
                      <strong class="text-body">{{ session.ip_address }}</strong>
                    </li>
                    <li class="mb-1">
                      <RdwIcon value="bi-box-arrow-in-right" class="bi-fw me-1" />
                      {%- trans %}Signed in{% endtrans %}
                      <strong class="text-body">
                        <RdwTime :value="session.start_time" />
                      </strong>
                    </li>
                    <li>
                      <RdwIcon value="bi-hourglass-split" class="bi-fw me-1" />
                      {%- trans %}Expired{% endtrans %}
                      <strong class="text-body">
                        <RdwTime :value="session.expiration_time" />
                      </strong>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- Right: action (disabled for current) -->
              {% if session.current %}
                <button class="btn btn-outline-secondary btn-sm flex-shrink-0"
                        disabled=""
                        title="{% trans %}You cannot revoke your current session{% endtrans %}">
                  <RdwIcon value="bi-shield-check" class="me-1" />
                  {%- trans %}Current{% endtrans %}
                </button>
              {% else %}
                <button class="btn btn-outline-danger btn-sm flex-shrink-0 rdw-btn-delete-session"
                        data-bs-toggle="modal"
                        data-bs-target="#rdw-delete-session-modal"
                        data-number="{{ session.number }}">
                  <RdwIcon value="bi-x-lg" class="me-1" />
                  {%- trans %}Revoke{% endtrans %}
                </button>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
  {# Delete Modal #}
  <form method="post" action="#">
    <ModalConfirm id="rdw-delete-session-modal"
                  :title="_('Revoke Session')"
                  :message="_('Are you sure? The device will be signed out from the application.')"
                  :submit="_('Revoke')"
                  :fields="['number']">
      <input type="hidden" name="action" value="delete" />
    </ModalConfirm>
  </form>
{% endblock %}