{% extends "base.tera.html" %}

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

    <br>

    <div class="row pb-4">
        <div class="col d-flex align-content-center flex-wrap" style="min-width: 300px;">
            {% set dir = page.path | trim_start_matches(pat="/") %}
            {% set image_path = dir ~ config.extra.appointment_image_filename %}
            {% set image = resize_image(path=image_path, width=520, height=520, op="fill") %}

            <img
                src="{{ image.url }}"
                class="rounded d-block mx-auto img-fluid shadow"
            />
        </div>
        <div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3" style="min-width: 300px;">
            <div>
                {{ page.content | safe }}

                <div class="text-center pt-3">
                    <h4 class="h4">Öffnungszeiten</h4>

                    <div class="d-inline-flex">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th class="pe-3" scope="row">Mo. Mi. Do.</th>
                                    <td class="ps-3">09:00 - 19:30 Uhr</td>
                                </tr>
                                <tr>
                                    <th class="pe-3" scope="row">Di. Fr.</th>
                                    <td class="ps-3">09:00 - 17:30 Uhr</td>
                                </tr>
                                <tr>
                                    <th class="pe-3" scope="row">Sa.</th>
                                    <td class="ps-3">10:00 - 16:30 Uhr</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

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

    <iframe id="iframe" src="/contact-form" width="100%" title="Kontakt-Formular"></iframe>

    <div class="alert alert-warning mt-5" role="alert">
        <h5 class="alert-heading">Bitte beachten Sie:</h5>
        <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 content %}

{% block scripts %}
    <script>
        "use strict";

        const iframe = document.querySelector("#iframe");

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