{% extends "base.html" %}

{% block content %}
    <h1 class="mb-5 text-center">{{ page.title }}</h1>

    <div class="grid grid-cols-1 gap-y-4 gap-x-8 items-center mb-5 lg:grid-cols-2">
        {% set image = resize_image(path=page.assets | first, width=600, height=600, op="fill") %}
        <img class="object-cover justify-self-center rounded drop-shadow"
             src="{{ image.url }}"
             alt="">

        <div class="divide-y">
            {{ page.content | safe }}

            <div class="pt-6 text-center">
                <div class="mb-1 text-xl font-bold">Öffnungszeiten</div>

                <div class="flex justify-center">
                    <table>
                        <tbody class="divide-y">
                            <tr>
                                <th class="p-1.5">Mo. Mi. Do.</th>
                                <td class="p-1.5">09:00 - 19:30 Uhr</td>
                            </tr>
                            <tr>
                                <th class="p-1.5">Di. Fr.</th>
                                <td class="p-1.5">09:00 - 17:30 Uhr</td>
                            </tr>
                            <tr>
                                <th class="p-1.5">Sa.</th>
                                <td class="p-1.5">10:00 - 16:30 Uhr</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <p class="mt-5">Wir freuen uns auf Ihren Besuch!</p>
            </div>
        </div>
    </div>

    <iframe id="iframe"
            src="{{ get_url(path='oxiform') | safe }}"
            class="w-full"
            title="Kontakt-Formular"></iframe>

    <div class="p-3 mt-2 rounded-xl bg-yellow-200/40">
        <div>Bitte beachten Sie:</div>
        <p class="mb-0">
            Können Sie einen vereinbarten Termin nicht wahrnehmen, so informieren Sie uns darüber bitte spätestens 8 Stunden vor dem Termin. Ansonsten behalten wir uns vor, Ihnen den Ausfall zu berechnen.
        </p>
    </div>
{% endblock %}

{% block scripts %}
    <script type="module">
        const iframe = document.querySelector("#iframe");

        iframe.addEventListener("load", () => {
            iframe.style.height = iframe.contentDocument.body.scrollHeight + 50 + "px";
        });
    </script>
{% endblock %}