<html>
<head>
    <link rel="stylesheet" href="/styles/tailwind.css">
    <script>
        function submitForm() {
            let isValid = true;
            let requiredFields = document.getElementById("main-form").querySelectorAll("[required]");

            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.style.border = "2px solid red";
                } else {
                    field.style.border = "";
                }
            });

            if (!isValid) {
                alert("All required fields must be filled.");
                return;
            }
            document.getElementById("loading").style.display = "block";
            document.getElementById("main-form").submit();
        }
    </script>
</head>
<body class="min-h-screen bg-gradient-to-b from-cyan-50 to-cyan-100 bg-cyan-200 flex justify-center items-center py-10 px-4 sm:px-6 lg:px-8">
    <form id="main-form" method="post" enctype="multipart/form-data"
          class="w-full max-w-4xl bg-neutral-50 shadow-xl rounded-lg p-8 border border-cyan-00">

        <!-- Loading Overlay -->
        <div id="loading" style="display:none">
            <div class="fixed top-0 left-0 h-screen w-screen bg-black bg-opacity-50 z-50 flex justify-center items-center">
                <div class="bg-neutral-50 p-4 rounded-lg shadow-lg">
                    <div class="text-center text-gray-700 font-semibold">Processing...</div>
                </div>
            </div>
        </div>

        <!-- Form Content -->
        <div class="space-y-8">
            <!-- Optional Intro Text -->
            {% if form_intro %}
                <div class="text-lg text-gray-800">{{ form_intro|safe }}</div>
            {% endif %}

            <!-- Dynamic Form Fields -->
            {% for field in fields %}
                <div class="space-y-1">
                    {{ field.html(defaults[field.name])|safe }}
                    {% if field.name in errors %}
                        <div class="text-red-500 text-sm">{{ errors[field.name] }}</div>
                    {% endif %}
                </div>
            {% endfor %}

            <!-- Submit Button -->
            <div class="mt-10 flex justify-end">
                <button type="button" onclick="submitForm()" class="bg-cyan-600 hover:bg-cyan-900 text-slate-100 font-bold py-2 px-4 rounded-lg">
                    Submit
                </button>
            </div>
        </div>
    </form>
</body>
</html>
