{%- block _edit_offer_contact_entry_row -%}

    <div class="grid sm:grid-cols-3 gap-6 py-3">

        <div>
            {{ form_row(form.name) }}
        </div>
        <div>
            {{ form_row(form.phone) }}
        </div>
        <div>
            {{ form_row(form.email) }}
        </div>

    </div>

{%- endblock -%}

{%- block _edit_offer_attachments_entry_row -%}

    {{ form.file.vars.value }}

{%- endblock -%}

{%- block _edit_offer_categories_categories_entry_row -%}

    <div class="mt-10 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex items-center justify-between">
            <h2 class="bg-gray-50 dark:bg-gray-950/95 pr-3 text-xl font-medium leading-6 text-gray-900 dark:text-gray-100/90">
                {{ data is not null ? data.name : 'Neue Kategorie' }}
            </h2>

            {%- if button_delete is defined and not button_delete.rendered -%}
                {{ form_widget(button_delete) }}
            {%- endif -%}

        </div>
    </div>

    {{ block('form_row') }}

{%- endblock -%}

{%- block _edit_offer_dates_entry_row -%}

    <div class="mt-10 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex items-center justify-between">
            <h2 class="bg-gray-50 dark:bg-gray-900 pr-3 text-xl font-medium leading-6 text-gray-900">

            </h2>

            {%- if button_delete is defined and not button_delete.rendered -%}
                {{ form_widget(button_delete) }}
            {%- endif -%}

        </div>
    </div>

    {{ block('form_row') }}

{%- endblock -%}

{% block live_collection_button_delete_widget %}

    <button type="{{ type|default("button") }}" {{ block('button_attributes') }}
            class="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm text-red-800 font-medium shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
        <span class="-ml-1 -mr-0.5 h-5 w-5"><twig:ux:icon name="ph:trash-fill" /></span>
        <span>{{ label_format|replace({'label.': '', '%name%': unique_block_prefix[1:]})|trans({}, 'admin') }}</span>
    </button>

{% endblock live_collection_button_delete_widget %}

{% block live_collection_button_add_widget %}

    <div class="mt-10 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center">
            <button type="{{ type|default('button') }}" {{ block('button_attributes') }}
                    class="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                <twig:ux:icon name="ph:plus" aria-hidden="true" class="-ml-1 -mr-0.5 h-5 w-5 text-gray-400" />
                {{ label_format|replace({'label.': '', '%name%': unique_block_prefix[1:]})|trans({}, 'admin' in app.current_route ? 'admin' : 'messages') }}
            </button>
        </div>
    </div>

{% endblock live_collection_button_add_widget %}

{% block ms_submit_widget %}

    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- elseif label is not same as(false) -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}

    <button type="{{ type|default('submit') }}"
            class="inline-flex items-center gap-x-0.5 rounded-md bg-white px-2.5 py-1.5 text-sm font-medium text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
            {{ block('button_attributes') }}>

        {%- if translation_domain is same as(false) -%}
            {%- if label_html is same as(false) -%}
                {{- label -}}
            {%- else -%}
                {{- label|raw -}}
            {%- endif -%}
        {%- else -%}
            {%- if label_html is same as(false) -%}
                {{- label|trans(label_translation_parameters, translation_domain) -}}
            {%- else -%}
                {{- label|trans(label_translation_parameters, translation_domain)|raw -}}
            {%- endif -%}
        {%- endif -%}

    </button>

{% endblock %}

{% block __participant_add_attendance_status_widget %}

    <input type="hidden"
           id="{{ form.vars.id }}"
           name="{{ form.vars.full_name }}"/>

    <div class="flex space-x-3">
        <button type="button"
                @click="status='confirmed'"
                :class="{'bg-green-100 ring-green-600 ring-2': 'confirmed' === status}"
                class="focus:outline-none inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-50 hover:bg-green-100 text-green-800">
            angemeldet
        </button>
        <button type="button"
                :class="{'bg-yellow-100 ring-yellow-600 ring-2': 'waitlisted' === status}"
                @click="status='waitlisted'"
                class="focus:outline-none inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-yellow-50 hover:bg-yellow-100 text-yellow-800">
            Warteliste
        </button>
        <button type="button"
                @click="status='waiting'"
                :class="{'bg-gray-100 ring-gray-500 ring-2': 'waiting' === status}"
                class="focus:outline-none inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-800">
            wartend
        </button>
    </div>
{% endblock %}

{% block _offers_filter_offerStatus_widget %}

    <div {{ block('widget_container_attributes') }} class="flex items-center space-x-2">
        {%- for child in form %}
            {{- form_widget(child, { attr: { class: 'hidden' } }) -}}

            <label for="{{ child.vars.id }}"
                   class="leading-0 p-0.5 bg-gray-50 {{ child.vars.data ? 'ring-2 ring-pink-500 ring-offset-2' : 'ring-2 ring-gray-50 ring-offset-2' }} rounded hover:bg-gray-100 cursor-pointer">

                {% set icons = {
                    draft: ['plus-circle', 'text-orange-600'],
                    cancelled: ['x-circle-fill', 'text-red-600'],
                    finalized: ['check-circle', 'text-green-600'],
                    reviewed: ['shield-check', 'text-green-600'],
                    published: ['check-circle-fill', 'text-green-600'],
                    completed: ['check-circle-fill', 'text-blue-600'],
                    unpublished: ['x-circle', 'text-gray-500'],
                } %}

                {% set icon = icons[child.vars.value]|default(['question', 'text-gray-400']) %}

                <span class="leading-0"
                      aria-label="{{ ("offers.status."~child.vars.value)|trans([], "admin") }}">
                    <span title="{{ ("offers.status."~child.vars.value)|trans([], "admin") }}"
                          aria-hidden="true"
                          class="{{ icon[1] }} inline-block w-8 h-8">
                        {{ ux_icon('ph:'~icon[0]) }}
                    </span>
                </span>

            </label>

        {% endfor -%}
    </div>

{% endblock %}

{% block _payments_filter_paymentStatus_widget %}

    <div {{ block('widget_container_attributes') }} class="flex items-center space-x-2">
        {%- for child in form %}
            {{- form_widget(child, { attr: { class: 'hidden' } }) -}}

            <label for="{{ child.vars.id }}"
                   class="leading-0 p-0.5 bg-gray-50 {{ child.vars.data ? 'ring-2 ring-pink-500 ring-offset-2' : 'ring-2 ring-gray-50 ring-offset-2' }} rounded hover:bg-gray-100 cursor-pointer">

                {% set icons = {
                    created: ['plus-circle', 'text-orange-600'],
                    paid: ['check-circle-fill', 'text-green-600'],
                    abandoned: ['stop-circle', 'text-gray-500'],
                    failed: ['x-circle-fill', 'text-red-600'],
                } %}

                {% set icon = icons[child.vars.value]|default(['question', 'text-gray-400']) %}

                <span class="leading-0"
                      aria-label="{{ ("payments.status."~child.vars.value)|trans([], "admin") }}">
                    <span title="{{ ("payments.status."~child.vars.value)|trans([], "admin") }}"
                          aria-hidden="true"
                          class="{{ icon[1] }} inline-block w-8 h-8">
                        {{ ux_icon('ph:'~icon[0]) }}
                    </span>
                </span>

            </label>

        {% endfor -%}
    </div>

{% endblock %}




{% block offer_image_picker_widget %}
    {{ component('Admin:Offer:ImagePicker', {
        name: full_name,
        selectedMediaUuuuid: value.uuid|default(null),
        offerId: form.parent.vars.data.id|default(null)
    }) }}
{% endblock %}

{% block markdown_widget %}
    {% if disabled %}
        {% set attr = attr|merge({
            'class': (attr.class|default('') ~ ' block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-800 opacity-50 cursor-not-allowed')|trim,
        }) %}
        {{ block('textarea_widget') }}
    {% else %}
    <div data-controller="ferienpass--admin-lexical"
         data-action="ferienpass--admin-lexical:dirty->live#action"
         data-live-action-param="setDirty">
        <div data-live-ignore
             class="lexical-container border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 flex flex-col mt-1">
            <div data-ferienpass--admin-lexical-target="toolbar" class="lexical-toolbar flex flex-wrap items-center gap-1 p-1 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-md">
                {% set buttons = [
                    { action: 'bold', icon: 'ph:text-b', label: 'Bold' },
                    { action: 'italic', icon: 'ph:text-italic', label: 'Italic' },
                    { type: 'separator' },
                    { action: 'ul', icon: 'ph:list-bullets', label: 'Bullet List' },
                    { action: 'ol', icon: 'ph:list-numbers', label: 'Numbered List' },
                ] %}

                {% for btn in buttons %}
                    {% if btn.type|default == 'separator' %}
                        <div class="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1"></div>
                    {% else %}
                        <button type="button"
                                class="p-1.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded text-sm font-medium transition-colors flex items-center justify-center text-gray-700 dark:text-gray-300 [&>svg]:size-4"
                                title="{{ btn.label }}"
                                data-action="click->ferienpass--admin-lexical#dispatchAction"
                                data-ferienpass--admin-lexical-action-param="{{ btn.action }}">
                            {{ ux_icon(btn.icon) }}
                        </button>
                    {% endif %}
                {% endfor %}
            </div>
            <div data-ferienpass--admin-lexical-target="editor" contenteditable="true" class="lexical-editor px-4 py-3 min-h-[200px] outline-none prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100/90"></div>
            {% if tokens|default(null) is not empty %}
                {% set tokensDialogId = 'lexical-tokens-' ~ id %}
                <div class="lexical-footer flex items-center justify-end gap-1 p-1 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-b-md">
                    <twig:Admin:Button variant="ghost" size="sm" command="show-modal" :commandfor="tokensDialogId">
                        <span class="flex items-center gap-1.5">
                            <twig:ux:icon name="ph:brackets-curly" class="size-4" />
                            <span>Tokens</span>
                        </span>
                    </twig:Admin:Button>
                </div>
            {% endif %}
        </div>
        {% set attr = attr|merge({
            'class': (attr.class|default('') ~ ' hidden')|trim,
            'data-ferienpass--admin-lexical-target': 'input',
            'data-live-ignore': ''
        }) %}
        {{ form_widget(form, { attr: attr }) }}

        {% if tokens|default(null) is not empty %}
            <el-dialog>
                <dialog id="{{ tokensDialogId }}"
                        class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                    <el-dialog-backdrop class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>
                    <div tabindex="0" class="flex min-h-full items-center justify-center p-4 text-center focus:outline-none sm:p-0">
                        <el-dialog-panel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-900 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                            <div class="absolute hidden sm:block top-0 right-0 pt-4 pr-4 z-20">
                                <button type="button"
                                        command="close"
                                        commandfor="{{ tokensDialogId }}"
                                        class="text-gray-400 dark:text-gray-700 hover:text-gray-500 dark:hover:text-gray-600 focus:outline-none transition ease-in-out duration-150"
                                        aria-label="Schließen">
                                    <twig:ux:icon name="ph:x" class="h-6 w-6" />
                                </button>
                            </div>
                            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-50">Benachrichtigungstokens</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Sie können folgende Tokens verwenden, die vor dem Versenden mit dem richtigen Inhalt ersetzt werden.</p>

                            <div class="mt-6 border-t border-gray-100 dark:border-gray-700">
                                <dl class="divide-y divide-gray-100 dark:divide-gray-800">
                                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                        <dt class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">Token</dt>
                                        <dd class="mt-1 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">Beispiel</dd>
                                    </div>
                                    {% for tokenName, tokenValue in tokens %}
                                        <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                            <dt class="text-xs font-medium leading-6 text-gray-900 dark:text-gray-100 font-mono">{{ '{{ ' ~ tokenName ~ ' }}' }}</dt>
                                            <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0 break-all">{{ tokenValue }}</dd>
                                        </div>
                                    {% endfor %}
                                </dl>
                            </div>
                        </el-dialog-panel>
                    </div>
                </dialog>
            </el-dialog>
        {% endif %}
    </div>
    {% endif %}
{% endblock %}
