<div class="fixed bottom-0 left-0 w-full bg-white dark:bg-gray-950 shadow z-50">
    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
        <div class="flex lg:gap-x-12 items-center">
            {% set nextSection = null %}
            {% set prevSection = null %}
            {% for s in sections %}
                {% if s == section %}
                    {% if not loop.first %}
                        {% set prevSection = sections[loop.index0 - 1] %}
                    {% endif %}
                    {% if not loop.last %}
                        {% set nextSection = sections[loop.index0 + 1] %}
                    {% endif %}
                {% endif %}
            {% endfor %}

            <div class="lg:w-72 flex-shrink-0 flex items-center gap-x-2 py-4">
                <div class="group relative inline-block">
                    <twig:Admin:Button variant="ghost"
                                       size="sm"
                                       href="{{ prevSection ? path(editRoute, params|merge({section: prevSection})) : '#' }}"
                                       :disabled="not prevSection"
                                       data-ferienpass--admin-edit-target="prevSectionButton">
                        <twig:ux:icon name="ph:arrow-left" class="size-4"/>
                    </twig:Admin:Button>
                    <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50 whitespace-nowrap">
                        Vorheriger Abschnitt (<span class="not-in-[.macos]:hidden">⌥←</span><span class="in-[.macos]:hidden">Alt+←</span>)
                    </div>
                </div>

                <div class="group relative inline-block">
                    <twig:Admin:Button variant="ghost"
                                       size="sm"
                                       href="{{ nextSection ? path(editRoute, params|merge({section: nextSection})) : '#' }}"
                                       :disabled="not nextSection"
                                       data-ferienpass--admin-edit-target="nextSectionButton">
                        <twig:ux:icon name="ph:arrow-right" class="size-4"/>
                    </twig:Admin:Button>
                    <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50 whitespace-nowrap">
                        Nächster Abschnitt (<span class="not-in-[.macos]:hidden">⌥→</span><span class="in-[.macos]:hidden">Alt+→</span>)
                    </div>
                </div>
            </div>

            <div class="flex-1 py-4 flex justify-end items-center">
                <div class="flex gap-x-4">
                    {% if not isReadonly %}
                    <div class="group relative inline-block">
                        <twig:Admin:Button variant="secondary"
                                           size="sm"
                                           type="submit"
                                           data-action="{{ useLiveAction ? 'live#action ' }}ferienpass--admin-edit#startSaving"
                                           data-live-action-param="save"
                                           data-ferienpass--admin-edit-target="saveButton"
                                           :disabled="not isDirty">
                            <twig:ux:icon name="ph:floppy-disk" class="size-4 mr-2"/>
                            Speichern
                        </twig:Admin:Button>
                        <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50 whitespace-nowrap">
                            Speichern (<span class="not-in-[.macos]:hidden">⌘S</span><span class="in-[.macos]:hidden">Strg+S</span>)
                        </div>
                    </div>
                    {% endif %}

                    {% if isReadonly and nextSection %}
                        <div class="group relative inline-block">
                            <twig:Admin:Button variant="primary"
                                               size="sm"
                                               href="{{ path(editRoute, params|merge({section: nextSection})) }}">
                                Weiter
                                <twig:ux:icon name="ph:arrow-right" class="size-4 ml-2"/>
                            </twig:Admin:Button>
                        </div>
                    {% elseif nextSection %}
                        <div class="group relative inline-block">
                            <twig:Admin:Button variant="primary"
                                               size="sm"
                                               type="submit"
                                               name="nextSection"
                                               value="{{ nextSection }}"
                                               data-action="{{ useLiveAction ? 'live#action ' }}ferienpass--admin-edit#startSaving"
                                               data-live-action-param="save"
                                               data-live-next-section-param="{{ nextSection }}"
                                               data-ferienpass--admin-edit-target="saveAndContinueButton"
                                               :disabled="not isDirty">
                                <twig:ux:icon name="ph:floppy-disk" class="size-4 mr-2"/>
                                Speichern und weiter
                                <twig:ux:icon name="ph:arrow-right" class="size-4 ml-2"/>
                            </twig:Admin:Button>
                            <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50 whitespace-nowrap">
                                Speichern und weiter (<span class="not-in-[.macos]:hidden">⌘→</span><span class="in-[.macos]:hidden">Strg+→</span>)
                            </div>
                        </div>
                    {% elseif not isReadonly %}
                        <div class="group relative inline-block">
                            <twig:Admin:Button variant="primary"
                                               size="sm"
                                               type="submit"
                                               name="redirect"
                                               value="{{ viewRoute }}"
                                               data-action="{{ useLiveAction ? 'live#action ' }}ferienpass--admin-edit#startSaving"
                                               data-live-action-param="save"
                                               data-live-redirect-param="{{ viewRoute }}"
                                               data-ferienpass--admin-edit-target="saveAndProofButton"
                                               :disabled="not isDirty">
                                <twig:ux:icon name="ph:floppy-disk" class="size-4 mr-2"/>
                                Speichern und Ansicht
                                <twig:ux:icon name="ph:arrow-right" class="size-4 ml-2"/>
                            </twig:Admin:Button>
                            <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50 whitespace-nowrap">
                                Speichern und Ansicht (<span class="not-in-[.macos]:hidden">⌘→</span><span class="in-[.macos]:hidden">Strg+→</span>)
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
