Files
torsearch/templates/components/Modal.html.twig

26 lines
1.3 KiB
Twig

<div{{ attributes }} data-controller="dialog" data-action="click->dialog#backdropClose" class="modal flex flex-row items-center {{ container_class|default('') }}">
<dialog data-dialog-target="dialog" class="py-3 px-4 w-[30rem] rounded-md">
<h2 class="mb-4 text-2xl font-bold">{{ heading }}</h2>
<div class="mb-4">
{% block content %}{% endblock %}
</div>
{% if show_cancel is defined or show_submit is defined %}
<div class="flex justify-end">
{% if show_cancel is defined %}
<button type="button" data-action="dialog#close" class="px-1 py-1 rounded-md self-end w-16 hover:bg-stone-100" autofocus>
{{ cancel_text|default('Cancel') }}
</button>
{% endif %}
{% if show_submit is defined %}
<button type="button" {{ submit_action|raw }} class="px-1 py-1 rounded-md bg-orange-500 self-end text-white w-16 ml-2 hover:bg-orange-600" autofocus>
{{ submit_text|default('Submit') }}
</button>
{% endif %}
</div>
{% endif %}
</dialog>
<button type="button" class="{{ button_class|default('') }}" data-action="dialog#open">{{ button_text|raw }}</button>
</div>