<modal-element name="delete-modal">
	<template x-if="currentResource">
		<form class="modal flex flex-col items-center gap-6" @submit.prevent="deleteResource(currentResource);">
			<div class="relative flex items-center justify-center w-24 h-24 mx-auto rounded-full text-failure/25">
				<svg class="absolute top-0 left-0 w-full h-full" width="112" height="112" viewbox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="56" cy="56" r="55.5" stroke="currentColor" stroke-dasharray="8 8"/>
				</svg>

				<div class="flex items-center justify-center w-20 h-20 text-4xl transition-all rounded-full bg-failure/25 text-failure">
					<i class="text-4xl ti ti-trash"></i>
				</div>
			</div>

			<div class="flex flex-col gap-2 items-center text-center">
				<div class="text-lg text-center">
					{% set title_html %}
					<strong x-text="{{ title|default('')|e("html_attr") }}"></strong>
					{% endset %}

					{{ message|replace({':title': title_html})|raw }}
				</div>

				{% if details is defined %}
					<p class="text-sm text-content-dimmed">
						{{ details }}
					</p>
				{% endif %}

			</div>

			<div class="flex gap-4 justify-center items-center">
				<button class="button button-outline" @click="modal.close()" type="button">
					{{ p__('button', 'No, cancel') }}
				</button>

				<button class="button button-failure" type="submit" :processing="isDeleting">
					{% include "/snippets/spinner.twig" %}

					{{ p__('button', 'Yes, delete') }}
				</button>
			</div>
		</form>
	</template>
</modal-element>
