{% 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=500, height=500, 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>
        </div>
    </div>

    <iframe id="iframe" src="/contact-form" width="100%" title="Kontakt-Formular"></iframe>
{% 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 %}