<turbo-stream action="update" target="modal">
    <template>
        <div class="p-6 text-center">
            <div class="mx-auto flex size-12 items-center justify-center rounded-full {{ type == 'modal-warning' ? 'bg-yellow-100 dark:bg-yellow-500/10' : 'bg-green-100 dark:bg-green-500/10' }}">
                {% if type == 'modal-warning' %}
                    <twig:ux:icon name="lucide:triangle-alert" class="size-6 text-yellow-600 dark:text-yellow-400" />
                {% else %}
                    <twig:ux:icon name="lucide:check" class="size-6 text-green-600 dark:text-green-400" />
                {% endif %}
            </div>
            <div class="mt-3 sm:mt-5">
                {% if headline %}
                    <h3 id="modal-headline" class="text-base font-semibold text-gray-900 dark:text-white">{{ headline }}</h3>
                {% endif %}
                {% if text %}
                    <div class="mt-2">
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ text }}</p>
                    </div>
                {% endif %}
            </div>
            {% if href and linkText %}
                <div class="mt-5 sm:mt-6">
                    <a href="{{ href }}"
                       data-turbo-frame="_top"
                       class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500">
                        {{ linkText }}
                    </a>
                </div>
            {% endif %}
        </div>
    </template>
</turbo-stream>
