<el-dialog>
	<dialog id="dialog" data-action="show->news--image-selector#onDialogOpen" aria-labelledby="dialog-title" class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
		<el-dialog-backdrop class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-gray-900/50"></el-dialog-backdrop>

		<div tabindex="0" class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
			<el-dialog-panel class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-3xl sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95 dark:bg-gray-800 dark:outline dark:-outline-offset-1 dark:outline-white/10">
				<div>
					<div class="mx-auto flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-500/10">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-green-600 dark:text-green-400">
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
						</svg>
					</div>
					<div class="mt-3 text-center sm:mt-5">
						<h3 id="dialog-title" class="text-base font-semibold text-gray-900 dark:text-white">Ajouter des images</h3>
						<div class="mt-2">
							<p class="text-sm text-gray-500 dark:text-gray-400">Ajouter des images
							</p>
						</div>
						<div class="grid grid-cols-4 gap-4 mt-4 max-h-96 overflow-y-auto p-2" data-news--image-selector-target="list">
							{% for image in images %}
								<label class="cursor-pointer block relative rounded-md overflow-hidden transition transform" data-action="click->news--image-selector#cardClick" data-news--image-selector-target="card" data-id="{{ image.id }}" data-url="{{ image.url }}">
									<input type="checkbox" class="hidden" value="{{ image.id }}" data-action="change->news--image-selector#toggleCheckbox" data-news--image-selector-target="checkbox">
									<img src="{{ image.url }}" alt="" class="w-full h-24 object-cover">
									<div class="absolute inset-0 bg-black/20 hidden" data-news--image-selector-target="overlay"></div>
									<span class="absolute top-2 right-2 hidden text-green-400" data-news--image-selector-target="checkIcon">
										<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewbox="0 0 20 20" fill="currentColor">
											<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414-1.414L7 12.172 4.707 9.879a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l9-9z" clip-rule="evenodd"/>
										</svg>
									</span>
								</label>
							{% else %}
								<p class="col-span-4 text-center text-gray-500">Aucune image disponible</p>
							{% endfor %}
						</div>
						<div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
							<button data-action="news--image-selector#validate" class="inline-flex w-full justify-center rounded-md bg-amber-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 sm:col-start-2 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">Valider</button>
							<button type="button" command="close" commandfor="dialog" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">Retour</button>
						</div>
					</el-dialog-panel>
				</div>
			</div>
		</div>
	</dialog>
</el-dialog>
