{% set required_keys = [] %}

{% set priority_options = [
    {"label": "None",   "value": "none"},
    {"label": "Low",    "value": "low"},
    {"label": "Medium", "value": "medium"},
    {"label": "High",   "value": "high"}
] %}

{% set contact_preference_options = [
    {"label": "Email", "value": "email", "checked": true},
    {"label": "Phone", "value": "phone"}
] %}

<main>

    <section id="contact-confirmation" style="display: none;">
        <h2>Message submitted. Contents:</h2>
        <p><em>This is what would arrive at the backend:</em></p>
        <div id="confirmation-data"></div>
    </section>

    <section>
        <h1>Contact</h1>

        <form id="contact-form" action="/contact/submit" method="post" style="max-width: 640px;">

            <div class="form-row">
                {{ apep.macros.input(name="name",  label="Name",  required=true) }}
                {{ apep.macros.input(name="email", label="Email", type="email", required=true) }}
            </div>

            <div class="form-row">
                {{ apep.macros.input(name="telephone", label="Phone") }}
                {{ apep.macros.input(name="company",   label="Company") }}
            </div>

            {{ apep.macros.input(name="address", label="Address") }}

            {{ apep.macros.input(name="message", label="Message", required=true, resize="vertical") }}

            <div class="form-row">
                {{ apep.macros.dropdown(name="priority", label="Priority", options=priority_options, selected="none") }}
                {{ apep.macros.radio(name="contact_preference", options=contact_preference_options) }}
            </div>

            <button type="submit" class="btn btn-primary btn-md">Submit</button>

        </form>
    </section>

</main>

<script>
    (function () {
        const form = document.getElementById("contact-form");
        const confirmation = document.getElementById("contact-confirmation");
        const confirmationData = document.getElementById("confirmation-data");

        const SKIP_KEYS = ["contact_preference"];

        form.addEventListener("submit", function (e) {
            e.preventDefault();

            const data = new FormData(form);

            let html = "";
            for (const [key, value] of data.entries()) {
                if (SKIP_KEYS.includes(key)) continue;
                const displayed = value.replace(/\n/g, "\\n");
                html += "<p><strong>" + key + ":</strong> \"" + displayed + "\"</p>";
            }

            confirmationData.innerHTML = html;
            confirmation.style.display = "";
            confirmation.scrollIntoView({ behavior: "smooth", block: "start" });

            form.reset();
        });
    })();
</script>