{% form_theme form with admin_form_themes() only %}
{% import '@extends/SerenityAdmin/macros/form_errors.html.twig' as formMacros %}
<div {{ attributes }}>
  {{
    form_start(form, {
    attr: {
    'data-action': 'live#action:prevent',
    'data-live-action-param': 'debounce(300)|files|save',
    'novalidate': 'true',

    'x-on:keydown.enter.prevent': "if ($event.target.form === $el) {
    $el.querySelector('button[type=submit]').click()
    }"
    }
    })
  }}
  <div class="flex flex-col gap-6">
    <div class="flex items-center justify-between">
      <div class="flex justify-start gap-4">
        {{ title }}
      </div>
      <div class="flex justify-end gap-4">
        {% if edit and delete %}
          <twig:SerenityAdmin:Dropdown title="Action" title:class="bg-gray-300 dark:text-gray-950">
            <li class="hover:bg-light cursor-pointer rounded px-3 py-1 transition dark:hover:bg-gray-500">
              <button
                class="flex cursor-pointer flex-row gap-1"
                data-action="live#action:prevent:confirm"
                data-live-confirm-message-param="Voulez-vous supprimer {{ form.vars.data.title is defined ? form.vars.data.title }} ?"
                data-live-action-param="debounce(200)|remove"
                data-live-id-param="{{ form.vars.data.id }}">
                <div class="icon-trash-2"></div>
                Supprimer {{ form.vars.data.title is defined ? form.vars.data.title }}
              </button>
            </li>
          </twig:SerenityAdmin:Dropdown>
        {% endif %}
        {% if cancelUrl or cancelAction %}
          {% if cancelUrl %}
            <a
              href="{{ path(cancelUrl) }}"
              data-turbo-method
              data-turbo-frame="_top"
              data-turbo-confirm="En annulant, vos modifications ne seront pas prise en compte. souhaitez-vous continuer ?"
              title="Configuration de l'administration"
              class="border-accent text-accent hover:border-accent-hover hover:bg-accent-hover focus-visible:outline-secondary cursor-pointer rounded-md border px-2 py-1 text-sm shadow-sm hover:text-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
              Annuler
            </a>
          {% endif %}
          {% if cancelAction %}
            <button
              type="button"
              data-action="{{ cancelAction }}"
              class="border-accent text-accent hover:border-accent-hover hover:bg-accent-hover focus-visible:outline-secondary cursor-pointer rounded-md border px-2 py-1 text-sm shadow-sm hover:text-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
              Annuler
            </button>
          {% endif %}
        {% endif %}
        <button
          type="submit"
          class="border-primary text-primary hover:border-primary hover:bg-primary focus-visible:outline-secondary cursor-pointer rounded-md border px-2 py-1 text-sm shadow-sm hover:text-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
          data-loading="addClass(opacity-50 disabled cursor-not-allowed) addAttribute(disabled)">
          Enregistrer
        </button>
      </div>
    </div>
    {% if not form.vars.valid %}
      <div class="rounded-md bg-red-100 p-4 text-red-800 dark:bg-red-900 dark:text-red-200">
        <div class="flex">
          <svg class="mr-2 h-5 w-5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path
                d="M18 10A8 8 0 11.999 10 8 8 0 0118 10zm-8-4a1 1 0 00-.993.883L9 7v4a1 1 0 001.993.117L11 11V7a1 1 0 00-1-1zm0 8a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5z"/>
          </svg>
          {{ formMacros.recursive_errors(form) }}
        </div>
      </div>
    {% endif %}
    {{ form_row(form) }}
  </div>
  {{ form_rest(form) }}
  {{ form_end(form) }}
</div>
