[staticPage]
useContent = 1
default = 0

[secondmenu]

[staticMenu mainmenu]
code=mainmenu

[staticMenu footmenu]
code=footmenu
==
{% partial 'shared/head' logo='logos/wappen.png' %}
{% partial 'ui/heading' %}

<div class="container py-12">
    <div class="prose max-w-none">
        {% page %}
    </div>

    <div class="flex flex-col items-center mx-auto">
        {repeater name="sizes" tab="Größen" prompt="Neuer Eintrag"}
            <div class="hidden">
                {text name="desc" label="Beschreibung" hidden}{/text}
                {mediafinder name="image" label="Bild"}{/mediafinder}
            </div>
            <figure class="bg-red-700 p-1 rounded mt-4">
                <img src="{{fields.image | media}}" />
                <figcaption class="text-center text-red-100 text-lg mt-2 mb-2">{{fields.desc}}</figcaption>
            </figure>
        {/repeater}
    </div>

    {repeater name="articles" tab="Artikel" prompt="Neuer Eintrag"}
        <div class="hidden">
            {richeditor name="content" label="Inhalt" hidden}{/richeditor}
            {text name="price" label="Preis" hidden}{/text}
            {mediafinder name="image" label="Bild"}{/mediafinder}
            {mediafinder name="image2" label="Bild 2"}{/mediafinder}
        </div>
        <div class="flex flex-col md:flex-row mt-10 first:mt-0 items-start">
            <div class="mr-5">
                <div class="prose max-w-none">
                    <h2>{text name="title" label="Titel"}{/text}</h2>
                    {richeditor name="content" label="Inhalt" hidden}{/richeditor}
                </div>
                <div class="flex mt-2">
                    <div class="bg-sky-100 text-sky-900 text-sm p-1">{{fields.price}}</div>
                </div>
                <a href="https://stamm-silva.de/anmeldung/stamm-silva-merch/register" class="border-2 border-sky-500 rounded-lg shadow px-4 py-2 inline-block mt-2 mb-2 leading-none hover:bg-sky-100 transition duration-300 no-underline" target="_BLANK">
                    Zur Bestellung
                </a>
            </div>
            <div class="w-64 flex-none border-red-700 border-solid border-2 rounded">
                {% if not fields.image2 %}
                    <img {{fields.image | resize('original')}} class="w-full h-auto">
                {% else %}
                    <div x-data="carousel([
                        {
                            imgSrc: '{{fields.image|media}}',
                        },
                        {
                            imgSrc: '{{fields.image2|media}}',
                        },
                    ])" x-init="autoplay" class="relative w-full overflow-hidden">
                        <div class="relative min-h-[60svh] w-full">
                            <template x-for="(slide, index) in slides">
                                <div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
                                    <img class="absolute w-full h-auto inset-0 object-cover" x-bind:src="slide.imgSrc" />
                                </div>
                            </template>
                        </div>

                        <!-- indicators -->
                        <div class="absolute rounded-md bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
                            <template x-for="(slide, index) in slides">
                                <button class="size-2 rounded-full transition" x-on:click="(currentSlideIndex = index + 1), setAutoplayInterval(autoplayIntervalTime)" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-blue-300' : 'bg-blue-300/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
                            </template>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    {/repeater}




</div>
{% partial 'shared/foot' %}