<div
  class="flex flex-col text-center"
  {{ attributes }} >
  <div
    id="{{ formId~'_file'}}"
    class="relative cursor-pointer rounded-lg p-6 transition hover:bg-gray-100 dark:text-slate-300 dark:hover:bg-slate-700" {{ stimulus_controller('media') }} x-data="{fileName : null}">
    <input
      type="file"
      id="{{ formId~"_uploadedFile" }}"
      name="{{ name~"[uploadedFile]" }}"
      data-model="uploadedFile"
      data-action="live#action"
      data-live-action-param="upload"
      x-ref="file"
      x-on:change="
        fileName = $refs.file.files[0]?.name;
        if ($refs.file.files.length > 0) {
            window.dispatchEvent(new CustomEvent('item-media-changed', { detail: { visible: true } }));
        }
    "
      class="absolute inset-0 z-30 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none"
      x-on:dragover="$refs.div.classList.add(...['bg-gray-100','dark:bg-slate-700'])"
      x-on:dragleave="$refs.div.classList.remove(...['bg-gray-100','dark:bg-slate-700'])"
      x-on:drop="$refs.div.classList.remove(...['bg-gray-100','dark:bg-slate-700'])">
    <div class="flex flex-col items-center justify-center text-center">
      <div class="mx-auto mt-4 max-w-[180px]">
        <div
          id="preview-{{ formId~"_uploadedFile" }}"
          class="group {% if file and file.name %}origin{% endif %}">
          {% if file and file.name %}
            <div class="hidden h-full w-full group-[.origin]:block group-[.preview]:hidden" data-origin>
              <twig:SerenityMedia:Image
                class="h-full w-full max-w-64"
                lazy="{{ false }}"
                responsive="{{ false }}"
                alt="preview"
                path="{{ file.name }}"
                fit="cover"
                imageWidth="{{ 250 }}"
                imageHeight="{{ 250 }}" />
              {% if required == false and deleteButton %}
                <button
                  data-action="live#action:prevent:confirm"
                  x-on:click="fileName= null"
                  data-live-confirm-message-param="Voulez-vous supprimer cette image ?"
                  data-live-action-param="debounce(300)|remove"
                  data-live-field-name-param="{{ formId~"_uploadedFile" }}"
                  data-live-id-param="{{ fileId }}"
                  data-live-path-param="{{ file.name }}"
                  class="absolute top-2 right-2 z-30 size-12 cursor-pointer rounded-full border border-gray-300 bg-slate-200 p-1 text-xl text-red-800 shadow hover:border-red-900 hover:bg-red-300 hover:text-red-900 dark:bg-slate-200"
                  x-tooltip.raw="{{ 'image.button-delete'|trans([],'serenity_media_messages.admin') }}">
                  <div class="icon-trash-2 pointer-events-none"></div>
                </button>
              {% endif %}
            </div>
          {% endif %}
          <svg
            class="mx-auto size-12 text-gray-300 group-[.origin]:hidden group-[.preview]:hidden"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon">
            <path fill-rule="evenodd"
                  d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
                  clip-rule="evenodd"></path>
          </svg>
          <div class="hidden h-full w-full group-[.preview]:block" data-preview>
            <img src="" alt="Preview" class="h-full w-full max-w-64">
            {% if required == false and deleteButton %}
              <button
                data-action="live#action:prevent:confirm"
                x-on:click="fileName= null"
                data-live-confirm-message-param="Voulez-vous supprimer cette image ?"
                data-live-action-param="debounce(300)|remove"
                data-live-field-name-param=""
                data-live-path-param=""
                class="absolute top-2 right-2 z-30 size-12 cursor-pointer rounded-full border border-gray-300 bg-slate-200 p-1 text-xl text-red-800 shadow hover:border-red-900 hover:bg-red-300 hover:text-red-900 dark:bg-slate-200"
                x-tooltip.raw="{{ 'image.button-delete'|trans([],'serenity_media_messages.admin') }}">
                <div class="icon-trash-2 pointer-events-none"></div>
              </button>
            {% endif %}
          </div>
        </div>
      </div>
      <p class="mt-1 text-xs">{{ 'image.drag'|trans([],'serenity_media_messages.admin') }}</p>
      <p class="mt-2 text-xs italic dark:text-slate-400" x-show="fileName" x-text="fileName"></p>
    </div>
  </div>
</div>
