<div class="{{ prefix }}">
    {{ form.render('begin') }}
    <div class="{{ prefix }}_spinner-overlay" style="display: none;">
        <div class="{{ prefix }}_spinner"></div>
        <p>{{ translations.loading_text }}</p>
    </div>
    {% if submitted %}
    <h2>{{ translations.submit_success_msg }}</h2>
    {% else %}
    <ul class="{{ prefix }}_errors">
        {% for error in form.getOwnErrors() %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
    <fieldset>
        {% include 'input.twig' with {'input': form.components.title} %}
    </fieldset>
    <fieldset class="{{ prefix }}_dates">
        {% include 'input.twig' with {'input': form.components.start} %}
        {% include 'input.twig' with {'input': form.components.end} %}
    </fieldset>
    <fieldset class="{{ prefix }}_description">
        {% include 'input.twig' with {'input': form.components.description} %}
    </fieldset>
    <fieldset>
        {% include 'input.twig' with { 'input' : form.components.type} %}

        <div class="RECEventCreator_container">
            <div class="left">
                {% include 'input.twig' with {'input': form.components.price_category} %}
            </div>
            <div class="right">
                {% include 'input.twig' with  {'input': form.components.price} %}
            </div>
        </div>

        {% include 'input.twig' with {'input': form.components.location} %}
    </fieldset>
    <fieldset>
        <!-- contact information -->
        {% include 'input.twig' with {'input': form.components.contact_mail } %}
        {% include 'input.twig' with {'input': form.components.website } %}
    </fieldset>
    <!-- Sweet Honey -->
    <div class="{{ prefix }}_sweethoney">
        {% include 'input.twig' with {'input': form.components.email} %}
    </div>

    {{ form.components.submit.control | raw }}

    {{ nonce | raw }}
    {{ form.render('end') }}
</div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        const locationSelect = document.querySelector('.{{ prefix }}_input select[name="location"]');
        if (locationSelect) {
            new Choices(locationSelect);
        }

        const typeSelect = document.querySelector('.{{ prefix }}_input select[name="type[]"]');
        if (typeSelect) {
            new Choices(typeSelect, {placeholderValue: '{{ translations.select_type_placeholder }}'});
        }

        // add spinner
        const form = document.querySelector('.{{ prefix }} form');
        const spinnerOverlay = document.querySelector('.{{ prefix }}_spinner-overlay');

        if (form) {
            form.addEventListener('submit', function () {

                const isValid = form.checkValidity();

                if (!isValid) {
                    return;
                }

                // Show spinner overlay
                spinnerOverlay.style.display = 'flex';

                // Disable all form elements. Small timeout to ensure form submission is not blocked.
                setTimeout(function () {
                    Array.from(form.elements).forEach(function (element) {
                        element.disabled = true;
                    });
                }, 100);
            });
        }
    });
</script>

<style>
    .{{ prefix }}_spinner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .{{ prefix }}_spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .{{ prefix }} {
        position: relative;
    }
</style>
{% endif %}
