{# Responsive list content: mobile cards + desktop table. #}

<div class="sm:hidden space-y-3">
  {% for item in items %}
    {% set view = "mobile" %}
    {% include "components/item_card.html" %}
  {% endfor %}

  {% if next_cursor %}
    <button hx-get="/dashboard/{{ project_key }}/list?view={{ active_view }}&after={{ next_cursor }}{% for k in filter_kind %}&kind={{ k }}{% endfor %}{% for s in filter_status %}&status={{ s }}{% endfor %}{% for t in filter_tag %}&tag={{ t }}{% endfor %}{% for a in filter_applies_to %}&applies_to={{ a }}{% endfor %}{% for r in filter_relation_type %}&relation_type={{ r }}{% endfor %}{% if filter_include_deleted %}&include_deleted=true{% endif %}"
            hx-target="#items-list-content"
            hx-swap="innerHTML"
            class="inline-flex w-full items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-semibold
                   text-primary-700 dark:text-primary-300
                   bg-primary-50 dark:bg-primary-950
                   hover:bg-primary-100 dark:hover:bg-primary-900/30
                   transition-colors">
      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
      </svg>
      {{ t("common.load_more") }}
    </button>
  {% endif %}

  {% if not items %}
    <div class="rounded-md border border-ledger-line dark:border-ledger-darkLine
                bg-white dark:bg-ledger-darkPanel px-4 py-10 text-center">
      <p class="text-sm text-gray-400 dark:text-gray-600">{{ t("common.no_items") }}</p>
      <a href="/dashboard/{{ project_key }}/items-new"
         class="mt-2 inline-flex text-sm text-primary-600 dark:text-primary-400 hover:underline">
        {{ t("common.create") }}
      </a>
    </div>
  {% endif %}
</div>

<div class="hidden sm:block overflow-x-auto rounded-md border border-ledger-line dark:border-ledger-darkLine
            bg-white dark:bg-ledger-darkPanel">
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-ledger-line dark:border-ledger-darkLine
                 bg-ledger-surfaceAlt dark:bg-ledger-darkPanelAlt">
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider w-20">
          ID
        </th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider w-24">
          {{ t("common.kind") }}
        </th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          {{ t("common.title") }}
        </th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider w-28">
          {{ t("common.status") }}
        </th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider w-40">
          {{ t("common.tags") }}
        </th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
          {{ t("common.branches") }}
        </th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider w-36">
          {{ t("common.updated_at") }}
        </th>
      </tr>
    </thead>
    <tbody id="items-table-body" class="divide-y divide-ledger-line dark:divide-ledger-darkLine">
      {% include "components/item_list_body.html" %}
    </tbody>
  </table>
</div>