{# ── Item card component ──
   Variables: item, view ("kanban"|"list"), project_key, project,
              kind_color(), kind_label(), status_color(), status_label()
#}

{% set kc = kind_color(item.kind) %}
{% set sc = status_color(item.status) %}

{% if view == "kanban" %}
{# ── Kanban card ── #}
<div class="kanban-card group bg-white dark:bg-ledger-darkPanel rounded-md
            border border-ledger-line dark:border-ledger-darkLine
            border-l-4 {{ kc.border }}
            p-3 cursor-grab active:cursor-grabbing
            hover:bg-primary-50/40 dark:hover:bg-primary-950/30 transition-colors"
     data-item-id="{{ item.local_id }}">
  {# Top row: kind badge + ID #}
  <div class="flex items-center justify-between mb-2">
    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide
                 {{ kc.bg }} {{ kc.text }}">
      {{ kind_label(item.kind, project) }}
    </span>
    <span class="text-[11px] font-mono text-gray-500 dark:text-gray-400">
      {{ item.local_id }}
    </span>
  </div>

  {# Title #}
  <a href="/dashboard/{{ project_key }}/items/{{ item.local_id }}"
     data-dashboard-item-link
     class="block text-sm font-medium text-gray-900 dark:text-gray-100
            hover:text-primary-600 dark:hover:text-primary-400
            focus:outline-none focus:ring-2 focus:ring-primary-500
            focus:ring-offset-2 dark:focus:ring-offset-ledger-darkPanel rounded
            transition-colors line-clamp-2 mb-2"
     onclick="event.stopPropagation()">
    {{ item.title }}
  </a>

  {# Bottom row: tags + branches #}
  <div class="flex flex-wrap items-center gap-1">
    {% for tag in item.tags %}
      <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                   bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
        {{ tag }}
      </span>
    {% endfor %}
    {% for branch in item.applies_to %}
      <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium
                   bg-ship-50 dark:bg-ship-600/20 text-ship-700 dark:text-ship-100">
        <svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
        </svg>
        {{ branch }}
      </span>
    {% endfor %}
  </div>

  {# Deleted indicator #}
  {% if item.deleted_at %}
    <div class="mt-2 flex items-center gap-1 text-[10px] text-red-400 dark:text-red-500">
      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
      </svg>
      {{ t("common.deleted") }}
    </div>
  {% endif %}
</div>

{% elif view == "list" %}
{# ── Table row ── #}
<tr class="hover:bg-primary-50/40 dark:hover:bg-primary-950/20 transition-colors
           {% if item.deleted_at %}opacity-50{% endif %}">
  {# ID #}
  <td class="px-4 py-3">
    <span class="text-xs font-mono text-gray-500 dark:text-gray-400">
      {{ item.local_id }}
    </span>
  </td>

  {# Kind badge #}
  <td class="px-4 py-3">
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                 {{ kc.bg }} {{ kc.text }}">
      {{ kind_label(item.kind, project) }}
    </span>
  </td>

  {# Title (clickable) #}
  <td class="px-4 py-3">
    <a href="/dashboard/{{ project_key }}/items/{{ item.local_id }}"
       data-dashboard-item-link
       class="text-sm font-medium text-gray-900 dark:text-gray-100
              hover:text-primary-600 dark:hover:text-primary-400
              focus:outline-none focus:ring-2 focus:ring-primary-500
              focus:ring-offset-2 dark:focus:ring-offset-ledger-darkPanel rounded
              transition-colors">
      {{ item.title }}
    </a>
    {% if item.deleted_at %}
      <span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                   bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">
        {{ t("common.deleted") }}
      </span>
    {% endif %}
  </td>

  {# Status badge with dot #}
  <td class="px-4 py-3">
    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium
                 {{ sc.bg }} {{ sc.text }}">
      <span class="w-1.5 h-1.5 rounded-full {{ sc.dot }}"></span>
      {{ status_label(item.status, project) }}
    </span>
  </td>

  {# Tags #}
  <td class="px-4 py-3">
    <div class="flex flex-wrap gap-1">
      {% for tag in item.tags %}
        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                     bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
          {{ tag }}
        </span>
      {% endfor %}
    </div>
  </td>

  {# Branches #}
  <td class="px-4 py-3">
    <div class="flex flex-wrap gap-1">
      {% for branch in item.applies_to %}
        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                     bg-ship-50 dark:bg-ship-600/20 text-ship-700 dark:text-ship-100">
          {{ branch }}
        </span>
      {% endfor %}
    </div>
  </td>

  {# Updated at #}
  <td class="px-4 py-3">
    <span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
      {{ item.updated_at[:16] | replace('T', ' ') }}
    </span>
  </td>
</tr>

{% elif view == "mobile" %}
<article class="rounded-md border border-ledger-line dark:border-ledger-darkLine
                bg-white dark:bg-ledger-darkPanel p-4
                {% if item.deleted_at %}opacity-50{% endif %}">
  <div class="flex items-start justify-between gap-3">
    <div class="min-w-0 space-y-2">
      <div class="flex flex-wrap items-center gap-2">
        <span class="text-xs font-mono text-gray-500 dark:text-gray-400">
          {{ item.local_id }}
        </span>
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                     {{ kc.bg }} {{ kc.text }}">
          {{ kind_label(item.kind, project) }}
        </span>
      </div>
      <a href="/dashboard/{{ project_key }}/items/{{ item.local_id }}"
         data-dashboard-item-link
         class="block text-sm font-semibold leading-6 text-gray-950 dark:text-gray-100
                hover:text-primary-700 dark:hover:text-primary-300
                focus:outline-none focus:ring-2 focus:ring-primary-500
                focus:ring-offset-2 dark:focus:ring-offset-ledger-darkPanel rounded">
        {{ item.title }}
      </a>
    </div>
    <span class="inline-flex shrink-0 items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium
                 {{ sc.bg }} {{ sc.text }}">
      <span class="w-1.5 h-1.5 rounded-full {{ sc.dot }}"></span>
      {{ status_label(item.status, project) }}
    </span>
  </div>

  {% if item.tags or item.applies_to %}
    <div class="mt-3 flex flex-wrap items-center gap-1.5">
      {% for tag in item.tags %}
        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                     bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
          {{ tag }}
        </span>
      {% endfor %}
      {% for branch in item.applies_to %}
        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                     bg-ship-50 dark:bg-ship-600/20 text-ship-700 dark:text-ship-100">
          {{ branch }}
        </span>
      {% endfor %}
    </div>
  {% endif %}

  <div class="mt-3 flex items-center justify-between gap-3 text-xs text-gray-500 dark:text-gray-400">
    <span>{{ t("common.updated") }}</span>
    <time class="font-mono" datetime="{{ item.updated_at }}">
      {{ item.updated_at[:16] | replace('T', ' ') }}
    </time>
  </div>
</article>

{% endif %}