<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">
                        <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded">
                            Cancel
                        </button>
                    </a>
                    <form action="{{ okURL }}" method="post" class="inline">
                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded no-underline">
                            {{ okText is defined ? okText : 'OK' }}
                        </button>
                    </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>
