{% extends "main/base/layout.html" %}
{% from "main/components/toast.html" import toast %}
{% from "main/components/js_alert.html" import js_alert %}


{% block content %}
    {{ js_alert("Just few lines of JavaScript used to pop toast.") }}

    <form
        hx-post="{{ url("form-validation") }}"
        hx-target="#validation-form-content"
        hx-swap="outerHTML"
    >
        <div class="card p-4">
            {% include "main/form_validation_content.html" %}
            <div class="d-flex">
                <button type="submit" class="btn btn-success ms-auto">
                    Submit
                </button>
            </div>
        </div>
    </form>

    {{ toast(title="Form validated and saved successfully. Sorry, but I used few lines of JS code for this toast.", id="toast-success") }}


    <script>
        let toastSuccess = null;

        document.addEventListener("DOMContentLoaded", function () {
            const toastElement = document.querySelector("#toast-success");
            toastSuccess = new bootstrap.Toast(toastElement, {
                delay: 3000,
            })
        });
    </script>
{% endblock %}