{% extends "base.html" %}

{% block title %}{{ t("page.list.title") }} - {{ project.name }} - IssueDeck{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between gap-4">
    <div class="flex items-center gap-3 min-w-0">
      <h1 class="text-2xl font-display font-bold text-gray-900 dark:text-gray-100">{{ t("page.list.title") }}</h1>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold
                    bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
        {{ items | length }}{% if next_cursor %}+{% endif %} {{ t("common.items_suffix") }}
      </span>
    </div>
    <a href="/dashboard/{{ project_key }}/items-new"
       class="inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-semibold
              bg-primary-600 text-white hover:bg-primary-700
              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="M12 4v16m8-8H4"/>
      </svg>
      {{ t("nav.create") }}
    </a>
  </div>

  {% if bulk_error %}
    <div class="rounded-md border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950/30 px-4 py-3 text-sm text-red-700 dark:text-red-300">
      {{ bulk_error }}
    </div>
  {% elif bulk_count %}
    <div class="rounded-md border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-950/30 px-4 py-3 text-sm text-green-700 dark:text-green-300">
      {{ t("bulk.success", count=bulk_count, action=t("bulk.action_" ~ bulk_action)) }}
    </div>
  {% endif %}

  <nav class="flex flex-wrap items-center gap-2" aria-label="{{ t('aria.work_queues') }}">
    {% for queue in work_queues %}
      <a href="{{ queue.href }}"
         class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-semibold
                border transition-colors
                {% if queue.active %}
                  border-primary-600 dark:border-primary-400
                  bg-primary-50 dark:bg-primary-950
                  text-primary-700 dark:text-primary-200
                {% else %}
                  border-ledger-line dark:border-ledger-darkLine
                  bg-white dark:bg-ledger-darkPanel
                  text-gray-600 dark:text-gray-400
                  hover:border-primary-200 dark:hover:border-primary-900
                  hover:text-gray-900 dark:hover:text-gray-100
                {% endif %}">
        {% if queue.icon == "Clock" %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2m5-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        {% elif queue.icon == "Inbox" %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 14.25h5.25L10.5 17.25h3l2.25-3H21M4.5 19.5h15a1.5 1.5 0 001.5-1.5V9.75L18 4.5H6L3 9.75V18a1.5 1.5 0 001.5 1.5z"/>
          </svg>
        {% elif queue.icon == "Play" %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.25v13.5L18.75 12 5.25 5.25z"/>
          </svg>
        {% elif queue.icon == "Block" %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 105.636 5.636a9 9 0 0012.728 12.728zM5.636 5.636l12.728 12.728"/>
          </svg>
        {% elif queue.icon == "Ship" %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.93 14.93 0 01-5.841 2.58"/>
          </svg>
        {% elif queue.icon == "Check" %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
          </svg>
        {% else %}
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 7h12m-9 0V5.25A1.25 1.25 0 0110.25 4h3.5A1.25 1.25 0 0115 5.25V7m2 0l-.75 12A1.5 1.5 0 0114.75 20.5h-5.5A1.5 1.5 0 017.75 19L7 7"/>
          </svg>
        {% endif %}
        <span>{{ t("queue." ~ queue.key) }}</span>
      </a>
    {% endfor %}
  </nav>

  <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
    <nav class="flex flex-wrap items-center gap-2" aria-label="{{ t('aria.saved_filters') }}">
      <span class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-600">
        {{ t("saved_filters.title") }}
      </span>
      {% for saved in saved_filters %}
        <span class="inline-flex items-stretch overflow-hidden rounded-md text-sm font-semibold
                     border transition-colors
                     {% if saved.active %}
                       border-primary-600 dark:border-primary-400
                       bg-primary-50 dark:bg-primary-950
                       text-primary-700 dark:text-primary-200
                     {% else %}
                       border-ledger-line dark:border-ledger-darkLine
                       bg-white dark:bg-ledger-darkPanel
                       text-gray-600 dark:text-gray-400
                     {% endif %}">
          <a href="{{ saved.href }}"
             class="inline-flex items-center gap-1.5 px-3 py-1.5
                    hover:bg-primary-50 dark:hover:bg-primary-950
                    hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 5v14l7-4 7 4V5a2 2 0 00-2-2H7a2 2 0 00-2 2z"/>
            </svg>
            <span>{{ saved.name }}</span>
          </a>
          <form method="post"
                action="/dashboard/{{ project_key }}/saved-filters/{{ saved.id }}/delete"
                class="flex border-l border-ledger-line dark:border-ledger-darkLine">
            <input type="hidden" name="next" value="/dashboard/{{ project_key }}/list?view={{ active_view }}">
            <button type="submit"
                    class="inline-flex items-center px-2 text-gray-400 hover:text-red-600
                           hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                    data-confirm="{{ t('confirm.delete_saved_filter') }}"
                    onclick="return confirm(this.dataset.confirm)"
                    title="{{ t('saved_filters.delete') }}"
                    aria-label="{{ t('saved_filters.delete_named', name=saved.name) }}">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 7h12m-9 0V5.25A1.25 1.25 0 0110.25 4h3.5A1.25 1.25 0 0115 5.25V7m2 0l-.75 12A1.5 1.5 0 0114.75 20.5h-5.5A1.5 1.5 0 017.75 19L7 7"/>
              </svg>
            </button>
          </form>
        </span>
      {% endfor %}
    </nav>

    <form method="post"
          action="/dashboard/{{ project_key }}/saved-filters"
          class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
      <input type="hidden" name="view" value="{{ active_view }}">
      {% for k in filter_kind %}<input type="hidden" name="kind" value="{{ k }}">{% endfor %}
      {% for s in filter_status %}<input type="hidden" name="status" value="{{ s }}">{% endfor %}
      {% for t in filter_tag %}<input type="hidden" name="tag" value="{{ t }}">{% endfor %}
      {% for a in filter_applies_to %}<input type="hidden" name="applies_to" value="{{ a }}">{% endfor %}
      {% for r in filter_relation_type %}<input type="hidden" name="relation_type" value="{{ r }}">{% endfor %}
      {% for field_filter in filter_custom_field_query %}
        <input type="hidden"
               name="{{ field_filter.name }}"
               value="{% if field_filter.value is sameas true %}true{% elif field_filter.value is sameas false %}false{% else %}{{ field_filter.value }}{% endif %}">
      {% endfor %}
      {% if filter_include_deleted %}<input type="hidden" name="include_deleted" value="true">{% endif %}

      <input type="text"
             name="name"
             required
             maxlength="80"
             placeholder="{{ t('saved_filters.name_placeholder') }}"
             class="w-full sm:w-52 rounded-md border-ledger-line dark:border-ledger-darkLine
                    bg-white dark:bg-ledger-darkPanel text-sm
                    text-gray-900 dark:text-gray-100
                    focus:border-primary-500 focus:ring-primary-500">
      <button type="submit"
              class="inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-sm font-semibold
                     bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900
                     hover:bg-gray-800 dark:hover:bg-white transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 3H7a2 2 0 00-2 2v16l7-4 7 4V5a2 2 0 00-2-2z"/>
        </svg>
        {{ t("saved_filters.save_current") }}
      </button>
    </form>
  </div>

  <div x-data="{ filtersOpen: false }"
       @dashboard-toggle-filters.window="filtersOpen = !filtersOpen"
       class="space-y-3">
    <button @click="filtersOpen = !filtersOpen"
            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold
                   text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800
                   hover:bg-gray-200 dark:hover:bg-gray-700 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
      </svg>
      {{ t("common.filter") }}
      <svg :class="filtersOpen ? 'rotate-180' : ''" class="w-3 h-3 transition-transform" 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>
      {% if filter_kind or filter_status or filter_tag or filter_applies_to or filter_custom_fields or filter_include_deleted %}
        <span class="w-2 h-2 rounded-full bg-primary-500"></span>
      {% endif %}
    </button>

    <form x-show="filtersOpen"
          x-cloak
          x-transition:enter="transition ease-out duration-200"
          x-transition:enter-start="opacity-0 -translate-y-2"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-150"
          x-transition:leave-start="opacity-100 translate-y-0"
          x-transition:leave-end="opacity-0 -translate-y-2"
          method="get"
          action="/dashboard/{{ project_key }}/list"
          class="p-4 rounded-md border border-ledger-line dark:border-ledger-darkLine
                 bg-white dark:bg-ledger-darkPanel space-y-4">
      <input type="hidden" name="view" value="{{ active_view }}">

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <fieldset>
          <legend class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
            {{ t("common.kind") }}
          </legend>
          <div class="space-y-1.5 max-h-40 overflow-y-auto">
            {% for kind_key, kind_cfg in project.kinds.items() %}
              {% set kc = kind_color(kind_key) %}
              <label class="flex items-center gap-2 cursor-pointer group">
                <input type="checkbox" name="kind" value="{{ kind_key }}"
                       {% if kind_key in filter_kind %}checked{% endif %}
                       class="rounded border-gray-300 dark:border-gray-600
                              text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium
                             {{ kc.bg }} {{ kc.text }}">
                  {{ kind_label(kind_key, project) }}
                </span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        <fieldset>
          <legend class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
            {{ t("common.status") }}
          </legend>
          <div class="space-y-1.5 max-h-40 overflow-y-auto">
            {% for status_key, status_cfg in project.statuses.items() %}
              {% set sc = status_color(status_key) %}
              <label class="flex items-center gap-2 cursor-pointer group">
                <input type="checkbox" name="status" value="{{ status_key }}"
                       {% if status_key in filter_status %}checked{% endif %}
                       class="rounded border-gray-300 dark:border-gray-600
                              text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                <span class="inline-flex items-center gap-1.5 px-1.5 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(status_key, project) }}
                </span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        <fieldset>
          <legend class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
            {{ t("common.tags") }}
          </legend>
          <div class="space-y-1.5 max-h-40 overflow-y-auto">
            {% if all_tags %}
              {% for tag in all_tags %}
                <label class="flex items-center gap-2 cursor-pointer group">
                  <input type="checkbox" name="tag" value="{{ tag }}"
                         {% if tag in filter_tag %}checked{% endif %}
                         class="rounded border-gray-300 dark:border-gray-600
                                text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ tag }}</span>
                </label>
              {% endfor %}
            {% else %}
              <p class="text-xs text-gray-400 dark:text-gray-600 italic">{{ t("common.no_tags") }}</p>
            {% endif %}
          </div>
        </fieldset>

        <fieldset>
          <legend class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
            {{ t("common.branches") }}
          </legend>
          <div class="space-y-1.5 max-h-40 overflow-y-auto">
            {% if project.branches %}
              {% for branch in project.branches %}
                <label class="flex items-center gap-2 cursor-pointer group">
                  <input type="checkbox" name="applies_to" value="{{ branch.key }}"
                         {% if branch.key in filter_applies_to %}checked{% endif %}
                         class="rounded border-gray-300 dark:border-gray-600
                                text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ branch.label }}</span>
                </label>
              {% endfor %}
            {% else %}
              <p class="text-xs text-gray-400 dark:text-gray-600 italic">{{ t("common.no_branches") }}</p>
            {% endif %}
          </div>
        </fieldset>
      </div>

      {% if project.custom_fields %}
        <fieldset>
          <legend class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
            {{ t("custom_fields.filters") }}
          </legend>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            {% for field_key, field_cfg in project.custom_fields.items() %}
              {% set field_controls = filter_custom_field_controls[field_key] %}
              <div class="block">
                <span class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">
                  {{ field_cfg.label }}
                </span>
                {% if field_cfg.type == "select" %}
                  <select name="custom_field__{{ field_key }}"
                          class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                    <option value="">{{ t("common.any") }}</option>
                    {% for option in field_cfg.options %}
                      <option value="{{ option }}"
                              {% if field_controls.exact == option %}selected{% endif %}>
                        {{ option }}
                      </option>
                    {% endfor %}
                  </select>
                {% elif field_cfg.type == "checkbox" %}
                  <select name="custom_field__{{ field_key }}"
                          class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                    <option value="any">{{ t("common.any") }}</option>
                    <option value="true"
                            {% if field_controls.exact is sameas true or field_controls.exact == "true" %}selected{% endif %}>
                      {{ t("custom_fields.true") }}
                    </option>
                    <option value="false"
                            {% if field_controls.exact is sameas false or field_controls.exact == "false" %}selected{% endif %}>
                      {{ t("custom_fields.false") }}
                    </option>
                  </select>
                {% elif field_cfg.type == "number" %}
                  <div class="grid grid-cols-2 gap-2">
                    <input name="custom_field_min__{{ field_key }}"
                           type="number"
                           step="any"
                           value="{{ field_controls.min }}"
                           placeholder="{{ t('custom_fields.min') }}"
                           class="min-w-0 rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500">
                    <input name="custom_field_max__{{ field_key }}"
                           type="number"
                           step="any"
                           value="{{ field_controls.max }}"
                           placeholder="{{ t('custom_fields.max') }}"
                           class="min-w-0 rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500">
                  </div>
                {% else %}
                  <input name="custom_field__{{ field_key }}"
                         type="{% if field_cfg.type == 'url' %}url{% else %}text{% endif %}"
                         value="{{ field_controls.exact }}"
                         class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                {% endif %}
                {% if field_cfg.type in ["text", "url", "number"] %}
                  <select name="custom_field_presence__{{ field_key }}"
                          aria-label="{{ field_cfg.label }} {{ t('custom_fields.presence') }}"
                          class="mt-2 w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                    <option value="any">{{ t("common.any") }}</option>
                    <option value="present" {% if field_controls.presence == "present" %}selected{% endif %}>
                      {{ t("custom_fields.present") }}
                    </option>
                    <option value="missing" {% if field_controls.presence == "missing" %}selected{% endif %}>
                      {{ t("custom_fields.missing") }}
                    </option>
                  </select>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        </fieldset>
      {% endif %}

      <div class="flex items-center justify-between pt-3 border-t border-gray-100 dark:border-gray-800">
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" name="include_deleted" value="true"
                 {% if filter_include_deleted %}checked{% endif %}
                 class="rounded border-gray-300 dark:border-gray-600
                        text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
          <span class="text-sm text-gray-600 dark:text-gray-400">{{ t("common.show_deleted") }}</span>
        </label>

        <div class="flex items-center gap-2">
          <a href="/dashboard/{{ project_key }}/list"
             class="px-3 py-1.5 rounded-md text-sm text-gray-500 dark:text-gray-400
                    hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            {{ t("common.reset") }}
          </a>
          <button type="submit"
                  class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-md text-sm font-semibold
                         bg-primary-600 text-white hover:bg-primary-700 transition-colors shadow-sm">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            {{ t("common.filter") }}
          </button>
        </div>
      </div>
    </form>
  </div>

  <form method="post"
        action="/dashboard/{{ project_key }}/items/bulk"
        x-data="{
          selected: [],
          get count() { return this.selected.length },
          toggleAll(checked) {
            const boxes = Array.from(this.$el.querySelectorAll('[data-bulk-item-checkbox]'));
            this.selected = checked ? boxes.map((box) => box.value) : [];
          }
        }"
        class="space-y-3">
    <input type="hidden" name="next" value="{{ current_list_url }}">

    <section class="rounded-md border border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-ledger-darkPanel p-3">
      <div class="flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between">
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 xl:flex xl:flex-wrap xl:items-end">
          <div class="min-w-[120px]">
            <label for="bulk-action" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">
              {{ t("bulk.action") }}
            </label>
            <select id="bulk-action"
                    name="bulk_action"
                    class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
              <option value="update">{{ t("bulk.action_update") }}</option>
              <option value="delete">{{ t("bulk.action_delete") }}</option>
              <option value="restore">{{ t("bulk.action_restore") }}</option>
            </select>
          </div>

          <div class="min-w-[140px]">
            <label for="bulk-kind" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">
              {{ t("common.kind") }}
            </label>
            <select id="bulk-kind"
                    name="bulk_kind"
                    class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
              <option value="">{{ t("bulk.keep_kind") }}</option>
              {% for kind_key, kind_cfg in project.kinds.items() %}
                <option value="{{ kind_key }}">{{ kind_label(kind_key, project) }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="min-w-[150px]">
            <label for="bulk-status" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">
              {{ t("common.status") }}
            </label>
            <select id="bulk-status"
                    name="bulk_status"
                    class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
              <option value="">{{ t("bulk.keep_status") }}</option>
              {% for status_key, status_cfg in project.statuses.items() %}
                {% if not status_cfg.requires_ship %}
                  <option value="{{ status_key }}">{{ status_label(status_key, project) }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>

          <div class="min-w-[220px]">
            <label for="bulk-tags" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">
              {{ t("common.tags") }}
            </label>
            <div class="flex gap-2">
              <select name="bulk_tag_mode"
                      class="w-24 rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                <option value="add">{{ t("bulk.tag_add") }}</option>
                <option value="remove">{{ t("bulk.tag_remove") }}</option>
                <option value="replace">{{ t("bulk.tag_replace") }}</option>
              </select>
              <input id="bulk-tags"
                     name="bulk_tags"
                     placeholder="triage, p1"
                     class="min-w-0 flex-1 rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500">
            </div>
          </div>
        </div>

        <div class="flex flex-col gap-3 lg:flex-row lg:items-end">
          {% if project.branches %}
            <div>
              <label for="bulk-branch-mode" class="block text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">
                {{ t("common.branches") }}
              </label>
              <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                <select id="bulk-branch-mode"
                        name="bulk_branch_mode"
                        class="rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                  <option value="keep">{{ t("bulk.keep_branches") }}</option>
                  <option value="replace">{{ t("bulk.replace_branches") }}</option>
                </select>
                <div class="flex flex-wrap gap-2">
                  {% for branch in project.branches %}
                    <label class="inline-flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-300">
                      <input type="checkbox"
                             name="bulk_applies_to"
                             value="{{ branch.key }}"
                             class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0">
                      <span>{{ branch.label }}</span>
                    </label>
                  {% endfor %}
                </div>
              </div>
            </div>
          {% endif %}

          <button type="submit"
                  :disabled="count === 0"
                  class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-semibold bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 hover:bg-gray-800 dark:hover:bg-white disabled:cursor-not-allowed disabled:opacity-40 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="M4.5 12.75l6 6 9-13.5"/>
            </svg>
            {{ t("bulk.apply") }}
            <span x-text="count ? '(' + count + ')' : ''"></span>
          </button>
        </div>
      </div>

      {% if project.custom_fields %}
        <div class="mt-3 border-t border-ledger-line dark:border-ledger-darkLine pt-3">
          <p class="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
            {{ t("bulk.custom_fields") }}
          </p>
          <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {% for field_key, field_cfg in project.custom_fields.items() %}
              <label class="block">
                <span class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">
                  {{ field_cfg.label }}
                </span>
                {% if field_cfg.type == "select" %}
                  <select name="custom_field__{{ field_key }}"
                          class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                    <option value="">{{ t("bulk.keep_custom_field") }}</option>
                    {% for option in field_cfg.options %}
                      <option value="{{ option }}">{{ option }}</option>
                    {% endfor %}
                  </select>
                {% elif field_cfg.type == "checkbox" %}
                  <select name="custom_field__{{ field_key }}"
                          class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 focus:border-primary-500 focus:ring-primary-500">
                    <option value="any">{{ t("bulk.keep_custom_field") }}</option>
                    <option value="true">{{ t("custom_fields.true") }}</option>
                    <option value="false">{{ t("custom_fields.false") }}</option>
                  </select>
                {% else %}
                  <input name="custom_field__{{ field_key }}"
                         type="{% if field_cfg.type == 'number' %}number{% elif field_cfg.type == 'url' %}url{% else %}text{% endif %}"
                         {% if field_cfg.type == "number" %}step="any"{% endif %}
                         placeholder="{{ t('bulk.keep_custom_field') }}"
                         class="w-full rounded-md border-ledger-line dark:border-ledger-darkLine bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500">
                {% endif %}
              </label>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </section>

    <div id="items-list-content">
      {% include "components/item_list_content.html" %}
    </div>
  </form>
</div>
{% endblock %}