{#
  Devices list page — Settings › Devices.

  Two concerns on one page:

    1. The "current browser" card, whose state is resolved client-side
       by /static/push.js (the server doesn't know which stored row,
       if any, belongs to the browser viewing this page). We render
       all four possible states' DOM hooks and let the script swap
       copy + disable the toggle as appropriate.

    2. The server-side subscription table: every row in
       ``push_subscriptions``, with a friendly UA label, delete action,
       and a single "Send test push" button that fans out to all rows.
#}
{% extends "settings/_base.html" %}
{% from "_macros.html" import confirm_dialog %}

{% block section_header %}
  <header class="settings-header">
    <h1 class="settings-header__title">Devices</h1>
    <p class="settings-header__subtitle">
      Browsers subscribed to push notifications from Agent Drop. Each
      device appears once per browser profile; re-subscribing refreshes
      the row rather than adding a duplicate.
    </p>
  </header>
{% endblock %}

{% block settings_head_extra %}
  <link rel="stylesheet" href="{{ static('devices.css') }}">
{% endblock %}

{% block settings_content %}

  {# Flash band — denylisted notice kinds only. #}
  {% if notice == "sent-ok" %}
    <div class="flash flash--success" role="status">
      Test push sent.{% if detail %} <code>{{ detail }}</code>{% endif %}
    </div>
  {% elif notice == "sent-empty" %}
    <div class="flash flash--info" role="status">
      No devices subscribed yet, so the test push had nowhere to go.
      Click <strong>Enable on this device</strong> below to add one.
    </div>
  {% elif notice == "failed" %}
    <div class="flash flash--error" role="status">
      Test push failed.{% if detail %} <code>{{ detail }}</code>{% endif %}
    </div>
  {% elif notice == "deleted" %}
    <div class="flash flash--success" role="status">Device removed.</div>
  {% endif %}

  {# ----- This browser card ----------------------------------------- #}
  <section class="card devices-card" data-devices-root>
    <div class="card__header">
      <h2 class="card__title">This browser</h2>
    </div>

    {% if not vapid_configured %}
      <p class="devices-status devices-status--unsupported" id="devices-status"
         data-state="unconfigured">
        Web Push isn't configured on this server. Generate keys with
        <code>make vapid-keys</code>, set <code>AGENTDROP_VAPID_PUBLIC_KEY</code>,
        <code>AGENTDROP_VAPID_PRIVATE_KEY</code>, and
        <code>AGENTDROP_VAPID_SUBJECT</code>, then restart.
      </p>
    {% else %}
      <p class="devices-status" id="devices-status" data-state="loading">
        Checking subscription state…
      </p>

      <div class="btn-row">
        <button type="button" class="btn btn--primary" id="devices-toggle" disabled>
          <span id="devices-toggle-label">Enable on this device</span>
        </button>
        <form method="post" action="/settings/devices/test">
          <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
          <button type="submit" class="btn btn--ghost">Send test push</button>
        </form>
      </div>

      <p class="form-field__error devices-error" id="devices-error" hidden></p>
    {% endif %}
  </section>

  {# ----- All subscriptions ---------------------------------------- #}
  <section class="devices-section">
    <h2 class="devices-section__title">All subscribed devices</h2>

    {% if subscriptions %}
      <div class="data-table-wrap">
        <table class="data-table devices-table">
          <thead>
            <tr>
              <th scope="col">Device</th>
              <th scope="col">Subscribed</th>
              <th scope="col">Last used</th>
              <th scope="col"><span class="sr-only">Actions</span></th>
            </tr>
          </thead>
          <tbody>
            {% for sub in subscriptions %}
              <tr>
                <td>
                  <div class="devices-table__label">{{ sub.label }}</div>
                  {% if sub.user_agent %}
                    <div class="devices-table__ua mono" title="{{ sub.user_agent }}">
                      {{ sub.user_agent }}
                    </div>
                  {% endif %}
                </td>
                <td class="mono">{{ sub.created_at.strftime("%Y-%m-%d") }}</td>
                <td class="mono">
                  {% if sub.last_used_at %}
                    {{ sub.last_used_at.strftime("%Y-%m-%d") }}
                  {% else %}
                    —
                  {% endif %}
                </td>
                <td class="devices-actions">
                  <form method="post"
                        action="/settings/devices/{{ sub.id }}/delete"
                        id="delete-device-{{ sub.id }}">
                    <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
                    <button class="btn btn--ghost btn--danger" type="submit">Remove</button>
                  </form>
                  {{ confirm_dialog(
                    form_id="delete-device-" ~ sub.id,
                    title="Remove this device?",
                    message="It will stop receiving push notifications.",
                    confirm_text="Remove device",
                    danger=True,
                  ) }}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="empty-state">
        <div>No devices subscribed yet.</div>
        <p class="empty-state__sub">
          Enable notifications on at least one browser above to start
          receiving drops as push notifications.
        </p>
      </div>
    {% endif %}
  </section>

  {% if vapid_configured %}
    <script src="{{ static('push.js') }}" defer></script>
  {% endif %}
{% endblock %}