<div
  {{ attributes }}
  class="relative inline-block w-fit shrink-0"
  x-data='{"open": {{ open|json_encode|raw }}, "name": "{{ name|default("default") }}"}'
  x-on:modal:open.window="if ($event.detail.name === name) open = true"
  x-on:modal:close.window="open = false"
  data-skip-morph>
  {% set hasData = null %}
  {% set classes = '' %}
  {% set label = null %}
  {% set errorCount = 0 %}
  {% if formFields is defined %}
    {% if formFields.vars is not defined %}
      {%
        set hasData = formFields
        | map(f => f.vars.data is not null)
        | reduce((carry, val) => carry or val)
      %}
      {%
        set label = formFields
        | map(f => f.vars.label ?? '')
        | filter(label => label != '')
        | join(', ')
      %}
      {%
        set errorCount = formFields
        | map(f => form_errors_count(f))
        | reduce((carry, val) => carry + val)
      %}
    {% else %}
      {% set hasData = formFields.vars.data %}
      {% set label = formFields.vars.label %}
      {% set errorCount = formFields.vars.errors|length %}
    {% endif %}
  {% endif %}
  {% if errorCount > 0 and icon is not null %}
    <span
      class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white">
      {{ errorCount }}
    </span>
  {% endif %}
  <div
    {% if icon is defined and icon is not null %}
      {%
        set classes = [
        'cursor-pointer',
        errorCount > 0 ? 'text-red-500' : (hasData ? 'text-emerald-500' : 'text-gray-400' )
        ]|join(' ')
      %}
    {% endif %}
    {% if text is defined and text is not null %}
      {%
        set classes = [
        'cursor-pointer',
        errorCount > 0 ? 'text-red-500' : ''
        ]|join(' ')
      %}
    {% endif %}
    {{ attributes.nested('button').defaults({'class': classes}) }}
    {{ attributes.nested('button') }}
    class="cursor-pointer text-3xl"
    x-on:click="open = true"
    {% if icon is defined and icon is not null %}
      x-tooltip.raw="{{ label }}"
    {% endif %}>
    {% if icon is defined and icon is not null %}
      <div class="{{ icon }}"></div>
    {% endif %}
    {% if text is defined %}
      {{ text }}
    {% endif %}
    {% block form_modal_button -%}
    {%- endblock form_modal_button %}
  </div>

  <div
    x-show="open"
    x-cloak
    x-transition
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-2">
    <div
      {%
        set classes = [
        'w-full rounded-2xl bg-white dark:bg-gray-700 dark:text-white/90 p-6 shadow-lg space-y-4'
        ]|join(' ')
      %}
      {{ attributes.nested('modal').defaults({'class': classes}) }}
      {{ attributes.nested('modal') }}
      class="w-full space-y-4 rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-700 dark:text-white/90"
      x-on:click.outside="$dispatch('modal:close'); formReset($el)"
      x-transition>
      {% if title is defined %}
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
          {{ title }}
        </h3>
      {% endif %}
      {% block form_modal_content -%}
      {%- endblock form_modal_content %}
      {% if closeButton %}
        <button
          type="button"
          class="bg-primary hover:bg-primary-hover mt-6 cursor-pointer rounded px-4 py-2 text-white"
          x-on:click="open = false; $dispatch('modal:close')">
          {{ ('button.close'|trans([],'serenity_admin_messages')) }}
        </button>
      {% endif %}
    </div>
  </div>
</div>
