{% if enclosure.plan == null or updatedPicture %}
	<div id="enclosure-{{ enclosure.id }}" data-controller="image-upload" data-image-upload-upload-url-value="{{ path('upload_enclosure_image', {id: enclosure.id}) }}" data-image-upload-live-id-value="enclosure-{{ enclosure.id }}" class="flex flex-col gap-2 items-start">
		<img data-image-upload-target="preview" src="https://placehold.co/200x200?text=Aucune+image" alt="Aperçu" class="aspect-video object-cover h-auto w-full rounded-xl">

		<div class="flex flex-col md:flex-row md:items-center gap-2 w-full">
			<input type="file" data-image-upload-target="input" data-action="change->image-upload#preview" accept="image/*" class="form-file-input w-full">
			<button class="btn-appli btn-validate" data-action="live#action" data-live-action-param="toogleUpdatePicture">Valider</button>
		</div>
	</div>
{% else %}
	<div data-controller="zoom" class="overflow-hidden rounded-xl shadow relative">
		<img src="{{ vich_uploader_asset(enclosure, 'imageFile') }}" alt="Plan du territoire {{ enclosure.name }}" class="aspect-video object-cover h-auto w-full rounded-xl cursor-zoom-in" data-action="click->zoom#open" data-zoom-target="thumb">

		<div data-zoom-target="modal" class="fixed inset-0 bg-black bg-opacity-70 hidden items-center justify-center z-50">
			<img data-zoom-target="image" class="max-h-[90vh] max-w-[90vw] rounded-lg shadow-lg cursor-zoom-out">
		</div>
	</div>
{% endif %}