{% trans_default_domain 'admin' %}

{% set segments = [
    { key: 'all',           label: 'outbox.kind.all',           count: segCounts.all },
    { key: 'rundmail',      label: 'outbox.kind.rundmail',      count: segCounts.rundmail },
    { key: 'transactional', label: 'outbox.kind.transactional', count: segCounts.transactional },
] %}

{% set filterSelect = 'w-auto shrink-0 rounded-md bg-white dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 border-0 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-inset focus:ring-primary-600 cursor-pointer' %}

<div class="flex flex-wrap items-center gap-3">

    {# search joined with sort — same markup as SearchableQueryableList #}
    <div class="flex w-full shrink-0 sm:w-80">
        <div class="-mr-px grid grow grid-cols-1 focus-within:z-10">
            <label for="outbox-search" class="sr-only">{{ 'outbox.search'|trans }}</label>
            {# 400ms rather than the 150ms default: a re-render costs several list queries, so typing a name should not queue one per letter #}
            <input type="search"
                   data-model="debounce(400)|query"
                   id="outbox-search"
                   name="search"
                   autocomplete="off"
                   class="col-start-1 row-start-1 block w-full rounded-l-md rounded-r-none bg-white py-1.5 pr-9 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:pl-9 sm:pr-8 sm:text-sm/6 border-0 ring-0 shadow-none dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-primary-500"
                   placeholder="{{ 'outbox.search'|trans }}">
            <twig:ux:icon name="ph:magnifying-glass" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400 sm:size-4" />
        </div>
        <div class="relative flex shrink-0 items-center rounded-r-md bg-white outline-1 -outline-offset-1 outline-gray-300 hover:bg-gray-50 focus-within:z-10 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-white/5 dark:outline-white/10 dark:hover:bg-white/10 dark:focus-within:outline-primary-500">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                <twig:ux:icon name="ph:arrows-down-up" aria-hidden="true" class="-ml-0.5 size-4 text-gray-400" />
            </div>
            <label for="outbox-sort" class="sr-only">{{ 'outbox.sort.label'|trans }}</label>
            <select data-model="sort" id="outbox-sort" name="sorting" class="block w-full appearance-none bg-transparent py-1.5 pl-9 pr-3 text-sm font-semibold text-gray-900 border-0 ring-0 focus:ring-0 cursor-pointer dark:text-gray-100">
                <option value="new">{{ 'outbox.sort.new'|trans }}</option>
                <option value="old">{{ 'outbox.sort.old'|trans }}</option>
                <option value="recip">{{ 'outbox.sort.recip'|trans }}</option>
            </select>
        </div>
    </div>

    {# kind segmented control #}
    <div class="inline-flex gap-0.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 p-0.5">
        {% for segment in segments %}
            <button type="button"
                    data-action="live#action"
                    data-live-action-param="setKind"
                    data-live-kind-param="{{ segment.key }}"
                    class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3.5 py-1.5 text-sm font-semibold transition {{ kind == segment.key ? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/60 hover:text-gray-900 dark:hover:bg-gray-900/50 dark:hover:text-gray-100' }}">
                {{ segment.label|trans }}
                <span class="min-w-[18px] rounded-full px-1.5 py-px text-center text-xs font-bold {{ kind == segment.key ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/15 dark:text-primary-400' : 'bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500' }}">{{ segment.count }}</span>
            </button>
        {% endfor %}
    </div>

    {# status filter #}
    <label for="outbox-status" class="sr-only">{{ 'outbox.filter.status'|trans }}</label>
    <select data-model="status" id="outbox-status" class="{{ filterSelect }}">
        <option value="">{{ 'outbox.filter.allStatus'|trans }}</option>
        <option value="zugestellt">{{ 'outbox.status.zugestellt'|trans }}</option>
        <option value="geoeffnet">{{ 'outbox.status.geoeffnet'|trans }}</option>
        <option value="geklickt">{{ 'outbox.status.geklickt'|trans }}</option>
        <option value="gesendet">{{ 'outbox.status.gesendet'|trans }}</option>
        <option value="bounce">{{ 'outbox.status.bounce'|trans }}</option>
    </select>

    {# time filter #}
    <label for="outbox-time" class="sr-only">{{ 'outbox.filter.time'|trans }}</label>
    <select data-model="time" id="outbox-time" class="{{ filterSelect }}">
        <option value="">{{ 'outbox.filter.allTime'|trans }}</option>
        <option value="today">{{ 'outbox.filter.today'|trans }}</option>
        <option value="7d">{{ 'outbox.filter.7d'|trans }}</option>
        <option value="30d">{{ 'outbox.filter.30d'|trans }}</option>
    </select>

</div>
