{# ── Quick-filter tab strip ─────────────────────────────────────────────────── #}
<nav class="flex gap-0 border-b mb-4 overflow-x-auto text-sm" style="border-color: var(--color-border);"
     aria-label="Filter by disposition">
  {% for tab in tabs %}
    {% set is_active = tab.key == active_tab %}
    <a href="/installs?{{ tab_link(tab.key) }}"
       hx-get="/installs/table?{{ tab_link(tab.key) }}"
       hx-target="#installs-table"
       hx-push-url="true"
       class="flex items-center gap-1.5 px-3 py-2 whitespace-nowrap transition-colors duration-100 border-b-2 -mb-px
              {% if is_active %}font-medium border-current{% else %}border-transparent{% endif %}"
       style="{% if is_active %}color: var(--color-brand);{% else %}color: var(--color-fg-muted);{% endif %}"
       {% if is_active %}aria-current="page"{% endif %}>
      {{ tab.label }}
      <span class="tabular-nums text-xs px-1.5 py-0.5 rounded-full leading-none"
            style="background-color: {% if is_active %}var(--color-brand-soft){% else %}var(--color-bg-muted){% endif %};
                   color: {% if is_active %}var(--color-brand){% else %}var(--color-fg-faint){% endif %};">
        {{ tab.count }}
      </span>
    </a>
  {% endfor %}
</nav>

{% if not rows %}
  {# Contextual empty state referencing the active tab #}
  {% if active_tab == "stale" %}
    {% set line = "No stale items — everything is up to date." %}
  {% elif active_tab == "all" %}
    {% set line = "No matching installs — adjust the filters or search." %}
  {% else %}
    {% set line = "No " ~ active_tab ~ " installs yet." %}
  {% endif %}
  {% include "components/empty_state.html" %}
{% else %}
{# ── Desktop table ──────────────────────────────────────────────────────────── #}
<div class="overflow-x-auto rounded-lg border hidden md:block" style="border-color: var(--color-border);">
<table class="w-full text-sm" id="installs-tbl">
  <thead class="sticky top-0 z-10 text-left text-xs uppercase tracking-wide border-b"
         style="background-color: var(--color-bg-muted); color: var(--color-fg-faint); border-color: var(--color-border);">
    <tr>
      {# Master checkbox column #}
      <th class="py-2 pl-3 pr-2 w-8">
        <input id="master-checkbox" type="checkbox" class="rounded"
               style="accent-color: var(--color-brand);"
               aria-label="Select all visible">
      </th>
      {% for col, label in [("display_name","Name"),("manager","Manager"),("project","Project"),("disposition","Disposition"),("installed_at","Installed")] %}
        {% set is_sort_col = (filters.order_by == col) %}
        <th class="py-2 pr-4 {% if col == 'installed_at' %}pl-0{% else %}pl-0{% endif %} font-medium
                   {% if col == 'installed_at' %}text-right{% endif %}">
          <a href="?{{ sort_link(col) }}" hx-get="/installs/table?{{ sort_link(col) }}" hx-target="#installs-table" hx-push-url="true"
             class="inline-flex items-center gap-1 transition-colors duration-100 hover:underline"
             style="color: {% if is_sort_col %}var(--color-brand){% else %}inherit{% endif %};">
            {{ label }}
            {% if is_sort_col %}
              {% if filters.order_dir == "desc" %}
                <span aria-label="sorted descending">&#x25BE;</span>
              {% else %}
                <span aria-label="sorted ascending">&#x25B4;</span>
              {% endif %}
            {% endif %}
          </a>
        </th>
      {% endfor %}
      <th class="py-2 pr-3 pl-2 w-20"></th>
    </tr>
  </thead>
  <tbody class="divide-y" style="border-color: var(--color-border);">
    {% for r in rows %}
      {% include "install_row.html" %}
    {% endfor %}
  </tbody>
</table>
</div>

{# ── Mobile card view ───────────────────────────────────────────────────────── #}
<div class="md:hidden space-y-3">
  {% for r in rows %}
    <div id="row-{{ r.id }}" class="rounded-lg border p-4 cursor-pointer {% if r.metadata_complete == 0 %}border-l-4{% endif %} transition-colors duration-100"
         data-edit-url="/installs/{{ r.id }}/edit"
         data-hoverable-row="true"
         style="background-color: var(--color-bg-elevated); border-color: {% if r.metadata_complete == 0 %}var(--color-accent){% else %}var(--color-border){% endif %};">
      <div class="flex items-start justify-between gap-2 mb-2">
        <div class="min-w-0 flex-1">
          <a href="/installs/{{ r.id }}/edit" hx-get="/installs/{{ r.id }}/edit"
             hx-target="#edit-modal" hx-swap="innerHTML"
             class="font-semibold leading-snug hover:underline block" style="color: var(--color-fg);">
            {{ r.display_name or r.package_name or "—" }}
          </a>
          <div class="text-xs font-mono mt-0.5 truncate" style="color: var(--color-fg-faint);">{{ r.command }}</div>
        </div>
        {% if r.disposition %}
          {% with tone=r.disposition, label=pres.disposition[r.disposition].label %}
            {% include "components/pill.html" %}
          {% endwith %}
        {% endif %}
      </div>
      <dl class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs mt-3">
        <div>
          <dt class="font-medium uppercase tracking-wide" style="color: var(--color-fg-faint);">Manager</dt>
          <dd class="mt-0.5">
            {% with manager=r.manager %}
              {% include "components/manager_badge.html" %}
            {% endwith %}
          </dd>
        </div>
        <div>
          <dt class="font-medium uppercase tracking-wide" style="color: var(--color-fg-faint);">Project</dt>
          <dd class="mt-0.5" style="color: var(--color-fg-muted);">{{ r.project or "—" }}</dd>
        </div>
        <div>
          <dt class="font-medium uppercase tracking-wide" style="color: var(--color-fg-faint);">Installed</dt>
          <dd class="mt-0.5 font-mono tabular-nums" style="color: var(--color-fg-muted);">{{ r.installed_at[:10] }}</dd>
        </div>
        <div class="flex items-end" data-row-actions="true">
          <button type="button" class="btn text-xs" data-share-url="/installs/{{ r.id }}/share">Share</button>
        </div>
      </dl>
    </div>
  {% endfor %}
</div>
{% endif %}