{% trans_default_domain 'admin' %}

{% set container_cva = cva({
    base: 'inline-flex whitespace-nowrap divide-x rounded-md outline-hidden',
    variants: {
        status: {
            published: 'divide-primary-700 dark:divide-primary-600',
            finalized: 'divide-blue-700 dark:divide-blue-600',
            reviewed: 'divide-blue-700 dark:divide-blue-600',
            draft: 'divide-orange-700 dark:divide-orange-600',
            cancelled: 'divide-red-700 dark:divide-red-600',
            completed: 'divide-blue-700 dark:divide-blue-600',
        }
    }
}) %}

{% set left_cva = cva({
    base: 'inline-flex items-center gap-x-1.5 rounded-l-md',
    variants: {
        status: {
            published: 'bg-primary-600 text-white dark:bg-primary-500',
            finalized: 'bg-blue-600 text-white dark:bg-blue-500',
            reviewed: 'bg-blue-600 text-white dark:bg-blue-500',
            draft: 'bg-orange-600 text-white dark:bg-orange-500',
            cancelled: 'bg-red-600 text-white dark:bg-red-500',
            completed: 'bg-blue-600 text-white dark:bg-blue-500',
        },
        size: {
            md: 'px-3 py-2',
            sm: 'px-2 py-1',
        }
    },
    defaultVariants: {
        size: 'md',
    }
}) %}

{% set button_cva = cva({
    base: 'inline-flex items-center rounded-l-none rounded-r-md hover:bg-opacity-90 focus-visible:outline-2',
    variants: {
        status: {
            published: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:outline-primary-400 dark:bg-primary-500 dark:hover:bg-primary-400 dark:focus-visible:outline-primary-400',
            finalized: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-blue-400 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:outline-blue-400',
            reviewed: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-blue-400 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:outline-blue-400',
            draft: 'bg-orange-600 text-white hover:bg-orange-700 focus-visible:outline-orange-400 dark:bg-orange-500 dark:hover:bg-orange-400 dark:focus-visible:outline-orange-400',
            cancelled: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-400 dark:bg-red-500 dark:hover:bg-red-400 dark:focus-visible:outline-red-400',
            completed: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-blue-400 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:outline-blue-400',
        },
        size: {
            md: 'p-2',
            sm: 'p-1',
        }
    },
    defaultVariants: {
        size: 'md',
    }
}) %}

{% set icon_cva = cva({
    base: 'forced-colors:text-[Highlight]',
    variants: {
        status: {
            published: 'text-white',
            finalized: 'text-white',
            draft: 'text-white',
            cancelled: 'text-white',
            completed: 'text-white',
        },
        size: {
            md: 'size-5',
            sm: 'size-4',
        }
    },
    defaultVariants: {
        size: 'md',
    }
}) %}

{% set status_icons = {
    cancelled: '<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />',
    reviewed: '<path fill-rule="evenodd" d="M9.661 2.237a.531.531 0 0 1 .678 0 11.947 11.947 0 0 0 7.078 2.749.5.5 0 0 1 .479.425c.069.52.104 1.05.104 1.59 0 5.162-3.26 9.563-7.834 11.256a.48.48 0 0 1-.332 0C5.26 16.564 2 12.163 2 7c0-.538.035-1.069.104-1.589a.5.5 0 0 1 .48-.425 11.947 11.947 0 0 0 7.077-2.75Zm4.196 5.954a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />',
    draft: '<path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />',
} %}
{% set default_icon = '<path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />' %}

<div {{ attributes }}>
    {% if currentStatus %}
        <el-select name="selected"
                   value="{{ currentStatus }}" {{ attributes.defaults(stimulus_controller('ferienpass/admin-dropdown')) }}>
            <div class="{{ container_cva.apply({status: currentStatus}) }}">
                <div class="{{ left_cva.apply({status: currentStatus, size: size}) }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                         class="-ml-0.5 {{ size == 'sm' ? 'size-4' : 'size-5' }}">
                        {{ (status_icons[currentStatus] ?? default_icon)|raw }}
                    </svg>
                    <span class="text-sm font-semibold">{{ currentLabel|trans }}</span>
                </div>
                <button type="button"
                        aria-label="{{ 'offers.status.change_aria'|trans({'%status%': currentLabel|trans}) }}"
                        class="{{ button_cva.apply({status: currentStatus, size: size}) }}">
                    <twig:ux:icon name="ph:caret-down" aria-hidden="true"
                                  class="{{ icon_cva.apply({status: currentStatus, size: size}) }}"/>
                </button>
            </div>

            <el-options anchor="bottom end" popover
                        class="w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg outline-1 outline-black/5 [--anchor-gap:--spacing(2)] data-leave:transition data-leave:transition-discrete data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 dark:divide-white/10 dark:bg-gray-900 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
                <el-option value="{{ currentStatus }}"
                           class="group/option block cursor-default p-4 text-sm text-gray-900 select-none focus:bg-primary-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-primary-500">
                    <div class="flex flex-col">
                        <div class="flex justify-between">
                            <p class="font-normal group-aria-selected/option:font-semibold in-[el-selectedcontent]:font-semibold">{{ currentLabel|trans }}</p>
                            <span class="text-primary-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-primary-400">
                                <twig:ux:icon name="ph:check" aria-hidden="true" class="size-5"/>
                            </span>
                        </div>
                        <p class="mt-2 text-gray-500 group-focus/option:text-primary-200 in-[el-selectedcontent]:hidden dark:text-gray-400 dark:group-focus/option:text-primary-100">{{ (currentLabel ~ "_help")|trans }}</p>
                    </div>
                </el-option>

                {% for transition in this.transitions %}
                    {% set targetStatus = transition.tos|first %}

                    {% if transition.name in ['cancel', 'relaunch', 'complete'] %}
                        <el-option value="{{ transition.name }}"
                                   class="group/option block cursor-default p-0 text-sm text-gray-900 select-none focus:bg-primary-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-primary-500">
                            <a href="{{ path('admin_offers_' ~ transition.name, { uuid: offer.uuid.toBase58 }) }}"
                               data-turbo-frame="modal"
                               class="block p-4">
                                <div class="flex flex-col">
                                    <div class="flex justify-between">
                                        <p class="font-normal group-aria-selected/option:font-semibold in-[el-selectedcontent]:font-semibold">{{ ('offers.workflow.' ~ transition.name)|trans }}</p>
                                    </div>
                                    <p class="mt-2 text-gray-500 group-focus/option:text-primary-200 in-[el-selectedcontent]:hidden dark:text-gray-400 dark:group-focus/option:text-primary-100">{{ ('offers.workflow.' ~ transition.name ~ '_help')|trans }}</p>
                                </div>
                            </a>
                        </el-option>
                    {% else %}
                        <el-option value="{{ transition.name }}"
                                   class="group/option block cursor-default p-4 text-sm text-gray-900 select-none focus:bg-primary-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-primary-500"
                                   data-action="click->live#action"
                                   data-live-action-param="applyTransition"
                                   data-live-transition-param="{{ transition.name }}">
                            <div class="flex flex-col">
                                <div class="flex justify-between">
                                    <p class="font-normal group-aria-selected/option:font-semibold in-[el-selectedcontent]:font-semibold">{{ ('offers.workflow.' ~ transition.name)|trans }}</p>
                                </div>
                                <p class="mt-2 text-gray-500 group-focus/option:text-primary-200 in-[el-selectedcontent]:hidden dark:text-gray-400 dark:group-focus/option:text-primary-100">{{ ('offers.workflow.' ~ transition.name ~ '_help')|trans }}</p>
                            </div>
                        </el-option>
                    {% endif %}
                {% endfor %}
            </el-options>
        </el-select>
    {% endif %}

    {% if confirm %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success"
                                     title="{{ currentLabel|trans({}, 'admin') }}"
                                     message="{{ ('offers.status.' ~ currentStatus ~ '_help')|trans({}, 'admin') }}"/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
</div>
