{% extends "base.html" %}
{% from "_macros.html" import hand_circle, pen_underline, loose_arrow %}
{% from "_inbox_macros.html" import dropcard, status_dot, priority_badge %}

{% block title %}{{ title }} · Agent Drop{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="{{ static('inbox.css') }}">
  {# HTMX powers the cursor-paginated "Load more" button. Pinned version
     mirrors drop_reading.html (issue #14, G2). #}
  <script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
{% endblock %}

{% block body_class %}inbox{% endblock %}

{#
  Build a query-string for view links. ``new_state`` overrides the state
  param; ``new_source`` is tri-valued (None = keep current, "" = drop,
  otherwise set). ``q`` is preserved unless ``drop_q`` is True.
#}
{% macro filter_url(new_state=None, new_source=None, drop_q=False) -%}
{%- set parts = [] -%}
{%- set s = new_state if new_state is not none else state -%}
{%- if s and s != "all" -%}{%- set _ = parts.append("state=" ~ s) -%}{%- endif -%}
{%- if new_source is none -%}
  {%- if source -%}{%- set _ = parts.append("source=" ~ source) -%}{%- endif -%}
{%- elif new_source -%}
  {%- set _ = parts.append("source=" ~ new_source) -%}
{%- endif -%}
{%- if not drop_q and q -%}{%- set _ = parts.append("q=" ~ q) -%}{%- endif -%}
{%- if parts -%}/?{{ parts|join("&") }}{%- else -%}/{%- endif -%}
{%- endmacro %}

{% block content %}
<div class="inbox-grid">

  <aside class="sidebar">
    <div class="sidebar__brand">
      <span class="sidebar__logo" aria-hidden="true">⟐</span>
      <span class="sidebar__wordmark">Agent Drop</span>
    </div>

    <div class="sidebar__section">
      <div class="sidebar__label">Views</div>
      {% set views = [
        ("all",      "All drops"),
        ("unread",   "Unread"),
        ("pinned",   "Pinned"),
        ("archived", "Archived"),
      ] %}
      {% for view_id, view_label in views %}
        <a class="sidebar__row {% if state == view_id %}sidebar__row--active{% endif %}"
           href="{{ filter_url(new_state=view_id) }}">
          <span class="sidebar__row-label">{{ view_label }}</span>
          {% if counts[view_id] > 0 %}
            <span class="sidebar__row-count">{{ counts[view_id] }}</span>
          {% endif %}
        </a>
      {% endfor %}
    </div>

    <div class="sidebar__section">
      <div class="sidebar__label">Sources</div>
      <a class="sidebar__row {% if not source %}sidebar__row--active{% endif %}"
         href="{{ filter_url(new_source='') }}">
        <span class="sidebar__row-label">
          <span class="sidebar__row-label-text">all sources</span>
          {% if not source %}
            <span class="sidebar__row-underline">{{ pen_underline(length_chars=11) }}</span>
          {% endif %}
        </span>
        <span class="sidebar__row-count">{{ counts.all }}</span>
      </a>
      {% for src in sources %}
        {% set active = (source == src.id) %}
        <a class="sidebar__row {% if active %}sidebar__row--active{% endif %}"
           href="{{ filter_url(new_source=src.id) }}">
          <span class="sidebar__row-label">
            <span class="sidebar__row-label-text">{{ src.name }}</span>
            {% if active %}
              <span class="sidebar__row-underline">{{ pen_underline(length_chars=src.name|length) }}</span>
            {% endif %}
          </span>
          {% if src.total > 0 %}
            <span class="sidebar__row-count">{{ src.total }}</span>
          {% endif %}
        </a>
      {% endfor %}
    </div>
  </aside>

  <main class="main">

    {# Desktop header — hidden on mobile via CSS. #}
    <div class="main-header">
      <div class="main-header__left">
        <h1 class="main-title">{{ title }}</h1>
        {% if new_count > 0 and state != "archived" %}
          <span class="main-counter">
            {{ hand_circle() }}
            <span class="main-counter__text">{{ new_count }} new</span>
          </span>
        {% endif %}
      </div>
      <div class="main-header__right">
        {# HTMX-enhanced search: typing fires a debounced GET against the
           same endpoint, which returns the inbox-list partial when called
           with the HX-Request header (see agentdrop.web.inbox.inbox).
           The wrapping <form> is preserved so no-JS users can still submit
           with Enter and get the full page. #}
        <form class="search" method="get" action="/"
              hx-get="/" hx-target="#inbox-list" hx-swap="innerHTML"
              hx-trigger="keyup changed delay:300ms from:input[name='q'], search from:input[name='q']"
              hx-push-url="true"
              hx-indicator=".search">
          {% if state and state != "all" %}
            <input type="hidden" name="state" value="{{ state }}">
          {% endif %}
          {% if source %}
            <input type="hidden" name="source" value="{{ source }}">
          {% endif %}
          <span class="search__icon" aria-hidden="true">
            <svg width="14" height="14" viewBox="0 0 14 14" focusable="false">
              <circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/>
              <path d="M9.5 9.5 L 12.5 12.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
            </svg>
          </span>
          <input class="search__input" type="search" name="q" value="{{ q }}" placeholder="Search drops…" aria-label="Search drops" autocomplete="off">
        </form>
        <a class="main-header__settings" href="/settings" title="Settings" aria-label="Settings">
          <span class="main-header__settings-icon" aria-hidden="true">⚙</span>
          <span class="main-header__settings-label">Settings</span>
        </a>
      </div>
    </div>

    {# Mobile header — hidden on desktop via CSS. #}
    <div class="mobile-header">
      <div class="mobile-header__row mobile-header__row--title">
        <div class="mobile-header__title-group">
          <h1 class="mobile-title">{{ title }}</h1>
          {% if new_count > 0 and state != "archived" %}
            <span class="main-counter main-counter--mobile">
              {{ hand_circle(size=26) }}
              <span class="main-counter__text">{{ new_count }} new</span>
            </span>
          {% endif %}
        </div>
        <a class="mobile-header__cog" href="/settings" aria-label="Settings">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
            <circle cx="9" cy="9" r="2.2" stroke="currentColor" stroke-width="1.4"/>
            <path d="M9 1.5v2M9 14.5v2M1.5 9h2M14.5 9h2M3.6 3.6l1.4 1.4M13 13l1.4 1.4M14.4 3.6L13 5M5 13l-1.4 1.4"
                  stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
          </svg>
        </a>
      </div>
      <form class="mobile-header__row mobile-header__row--search search" method="get" action="/"
            hx-get="/" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-trigger="keyup changed delay:300ms from:input[name='q'], search from:input[name='q']"
            hx-push-url="true"
            hx-indicator=".mobile-header__row--search">
        {% if state and state != "all" %}
          <input type="hidden" name="state" value="{{ state }}">
        {% endif %}
        {% if source %}
          <input type="hidden" name="source" value="{{ source }}">
        {% endif %}
        <span class="search__icon" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 14 14" focusable="false">
            <circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/>
            <path d="M9.5 9.5 L 12.5 12.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
          </svg>
        </span>
        <input class="search__input" type="search" name="q" value="{{ q }}" placeholder="Search drops…" autocomplete="off">
      </form>
      <div class="mobile-header__row mobile-header__row--tabs">
        <nav class="mobile-tabs" aria-label="Filter by state">
          {% set tabs = [
            ("all",      "All"),
            ("unread",   "Unread"),
            ("pinned",   "Pinned"),
            ("archived", "Archived"),
          ] %}
          {% for tab_id, tab_label in tabs %}
            <a class="mobile-tab {% if state == tab_id %}mobile-tab--active{% endif %}"
               href="{{ filter_url(new_state=tab_id) }}">
              <span class="mobile-tab__label">{{ tab_label }}</span>
              {% if counts[tab_id] > 0 %}
                <span class="mobile-tab__count">{{ counts[tab_id] }}</span>
              {% endif %}
            </a>
          {% endfor %}
        </nav>
      </div>
    </div>

    <div class="main__list" id="inbox-list">
      {% if drops %}
        {% include "_inbox_list.html" %}
      {% else %}
        <div class="empty-state">
          <div class="empty-state__primary">No drops in this view.</div>
          <div class="empty-state__secondary">
            When an agent posts something, it'll land here — and ping your phone.
          </div>
          <div class="empty-state__arrow">{{ loose_arrow() }}</div>
        </div>
      {% endif %}
    </div>

    <footer class="inbox-footer">· end of drops ·</footer>
  </main>

</div>
{% endblock %}