{% trans_default_domain 'admin' %}


<div {{ attributes }} class="max-h-screen">

    <div class="rounded border border-gray-200 dark:border-gray-700 overflow-hidden lg:flex">
        <section aria-labelledby="message-heading"
                 class="flex h-full min-w-0 flex-1 flex-col overflow-hidden lg:order-last bg-white dark:bg-gray-900">

            <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                {% if offer is not null %}
                    <twig:Admin:Offer:SummaryHeader
                        :offer="offer"
                        :menu="this.getMenu(offer)"
                        showThirdLine="{{ false }}"
                        showStatusSelect="{{ true }}"
                        showWorkflowButton="{{ true }}"
                        class="border-b-0"
                    />
                {% endif %}
            </div>

            {% if offer is not null %}
                <div class="min-h-0 max-h-[600px] flex-1 overflow-y-auto">

                    {% if 'web-details' == format %}
                        {{ include('@FerienpassAdmin/page/offers/proof/web-details.html.twig') }}
                    {% elseif 'web-list' == format %}
                        {{ include('@FerienpassAdmin/page/offers/proof/web-list.html.twig') }}
                    {% elseif 'pdf' == format|slice(-3) %}
                        {{ include('@FerienpassAdmin/page/offers/proof/pdf.html.twig', { pdf: format|slice(0, -4) }) }}
                    {% endif %}

                </div>
            {% else %}
                <div class="text-center py-12">
                    <twig:ux:icon name="ph:folder-open" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" aria-hidden="true" />
                    <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Korrekturabzug</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Wählen Sie ein Angebot zum Anzeigen aus.</p>
                </div>

            {% endif %}
        </section>

        <aside class="hidden lg:order-first lg:block lg:flex-shrink-0">
            <div class="relative flex h-full w-80 flex-col border-r border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-900">
                <div class="flex-shrink-0">
                    <div class="flex h-16 flex-col justify-center bg-white dark:bg-gray-800 px-6">
                        <div class="flex items-baseline space-x-3">
                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ 'offers.title'|trans }}</h2>
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ offers|length }} Angebote</p>
                        </div>
                    </div>
                    <div class="border-b border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 px-5 py-2">
                        <div>
                            <label for="search" class="sr-only">Nachrichten durchsuchen</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="h-5 w-5 text-gray-400 dark:text-gray-500">
                                        {{ ux_icon('ph:magnifying-glass') }}
                                    </span>
                                </div>
                                <input type="search"
                                       data-model="query"
                                       name="search"
                                       id="search"
                                       class="block w-full py-1 pl-10 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:ring-gray-600"
                                       placeholder="Suchen…">
                            </div>
                        </div>
                    </div>
                </div>
                <nav aria-label="Angebote" class="min-h-0 flex-1 overflow-y-auto">
                    <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700 border-b border-gray-200 dark:border-gray-700">
                        {% for item in offers %}
                            {{ include('@FerienpassAdmin/components/OffersReview/_item.html.twig', { item: item, offer: offer }) }}
                        {% endfor %}
                    </ul>

                </nav>
            </div>
        </aside>
    </div>
</div>
