{# Action Inbox — time-aware actionable signals.
   Lazy-loaded fragment served from /portfolio/inbox. Re-rendered after
   each dismissal POST. Items already arrive in display order. #}

{% set urgent_count = items | selectattr('severity.value', 'equalto', 'urgent') | list | length %}
{% set watch_count  = items | selectattr('severity.value', 'equalto', 'watch')  | list | length %}
{% set total = items | length %}

<div id="inbox-panel" class="panel mb-4"
     x-data="{ open: false }"
     {% if account %}data-account="{{ account }}"{% endif %}>
  <div class="flex items-center justify-between cursor-pointer select-none" @click="open = !open">
    <div class="flex items-center gap-2">
      <span class="text-[14px] font-semibold">Action Inbox</span>
      {% if total > 0 %}
        <span class="text-[11px] num font-medium px-2 py-[2px] rounded-full"
              style="color: var(--color-label-1); background: var(--color-hairline);">{{ total }}</span>
      {% endif %}
      {% if urgent_count > 0 %}
        <span class="text-[11px] font-medium px-2 py-[2px] rounded-full"
              style="color: var(--color-neg); background: var(--color-neg-tint);">{{ urgent_count }} urgent</span>
      {% endif %}
      {% if watch_count > 0 %}
        <span class="text-[11px] font-medium px-2 py-[2px] rounded-full"
              style="color: var(--color-warn); background: var(--color-warn-tint);">{{ watch_count }} watch</span>
      {% endif %}
    </div>
    <span x-text="open ? '▾' : '▸'" class="text-label-2 text-[13px]"></span>
  </div>

  <div x-show="open" x-transition class="mt-3">
    {% if total == 0 %}
      <div class="text-[12px] text-label-2 py-2">Nothing to act on right now.</div>
    {% else %}
      {% set sections = [
        ('urgent', 'Urgent', 'var(--color-neg)'),
        ('watch',  'Watch',  'var(--color-warn)'),
        ('info',   'Info',   'var(--color-info)'),
      ] %}
      {% for sev, label, sev_color in sections %}
        {% set rows = items | selectattr('severity.value', 'equalto', sev) | list %}
        {% if rows %}
          <div class="mt-3 first:mt-0">
            <div class="label-uc text-[10px] mb-2" style="color: {{ sev_color }};">{{ label }}</div>
            <div class="flex flex-col">
              {% for it in rows %}
                <div class="flex items-start justify-between gap-3 py-[9px]"
                     data-symbol="{{ it.ticker|upper }}"
                     style="border-bottom: 0.5px solid var(--color-hairline);">
                  <div class="flex items-start gap-[10px] min-w-0 flex-1">
                    <span class="mt-[5px] shrink-0"
                          style="width:6px; height:6px; border-radius:50%;
                                 background: {{ sev_color }};
                                 box-shadow: 0 0 6px {{ sev_color }};"></span>
                    <div class="min-w-0 flex-1">
                      <div class="flex items-baseline justify-between gap-2">
                        <a href="{{ it.deep_link }}"
                           class="text-[13px] font-medium tracking-tightish text-text no-underline hover:underline truncate">{{ it.title }}</a>
                        {% if it.dollar_impact is not none %}
                          <span class="num text-[12px] font-medium shrink-0"
                                style="color: {{ sev_color }};">
                            ${{ '{:,.0f}'.format(it.dollar_impact) }}
                          </span>
                        {% endif %}
                      </div>
                      <div class="text-[11px] text-label-2 truncate">{{ it.subtitle }}</div>
                      <div class="text-[10px] text-label-3 num mt-[2px]">{{ it.event_date.isoformat() }}</div>
                    </div>
                  </div>
                  <button type="button"
                          class="text-label-2 hover:text-text text-[16px] leading-none px-2 py-1 cursor-pointer shrink-0"
                          hx-post="/portfolio/inbox/dismiss/{{ it.dismiss_key }}{% if account %}?account={{ account }}{% endif %}"
                          hx-target="#inbox-panel"
                          hx-swap="outerHTML"
                          aria-label="Dismiss"
                          title="Dismiss">×</button>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
  </div>
</div>