<style>
    #{{ id }}:target {
        visibility: visible;
        opacity: 1;
    }
</style>
<div id="{{ id }}" class="{{ colors.modal.shadow }} invisible opacity-0 fixed inset-0 flex items-center justify-center transition-all duration-400 h-full">
    <div id="hide-{{ id }}">
        <div class="{{ colors.modal.content }} p-8 border rounded relative">
            {% include content %}
            {% if okURL is defined %}
                <div class="flex justify-end mt-4">
                    <a href="#hide-{{ id }}" class="mr-4 no-underline">
                        {% include 'lib/buttons/default.twig' with {
                            label: "Cancel" 
                        } %}
                    </a>
                    <form action="{{ okURL }}" method="post" class="inline">
                        {% include 'lib/buttons/primary.twig' with {
                            label: okText is defined ? okText : 'OK',
                        } %}
                    </form>
                </div>
            {% endif %}
            {% if dangerURL is defined %}
                <div class="flex justify-end mt-4">
                    <a href="#hide-{{ id }}" class="mr-4 no-underline">
                        {% include 'lib/buttons/default.twig' with {
                        label: "Cancel" 
                    } %}
                    </a>
                    <form action="{{ dangerURL }}" method="post" class="inline">
                        {% include 'lib/buttons/danger.twig' with {
                        label: dangerText is defined ? dangerText : 'OK',
                    } %}
                    </form>
                </div>
            {% endif %}
            <a href="#hide-{{ id }}" class="absolute top-2 right-2 no-underline">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
                    <path d="M18 6 6 18" />
                    <path d="m6 6 12 12" />
                </svg>
            </a>
        </div>
    </div>
</div>
