{%
  macro collapseFormGroup(
  formFields,
  title,
  isAccordion,
  preText,
  postText,
  postTitle,
  label = true,
  labelParent = true,
  dropdown = null
  )
%}
{% import _self as self %}

{# formFields doit être une liste de champs ex: [form.title, form.description] #}
{%
  set errorCount = formFields
  | map(f => form_errors_count(f))
  | reduce((carry, val) => carry + val)
%}

{% set isValid = errorCount == 0 %}

{% if isAccordion %}
  <div
    x-data="{ open: false }"
    data-skip-morph
    class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
    data-accordion>
    <div
      x-on:click="open = !open"
      class="flex items-center justify-between cursor-pointer p-3 {{ not isValid ? 'bg-red-100 dark:bg-red-900' }}">
      <div class="flex items-center gap-x-2">
        {% if postTitle is not null or title is not null %}
          <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
            {% if not isValid %}
              <span
                class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-red-900 align-super text-xs font-bold text-white dark:bg-red-500">
                {{- errorCount -}}
              </span>
            {% endif %}
            {{ title }}
            {% if postTitle is defined and postTitle is not null %}
              <div class="text-sm text-gray-500">
                {{ postTitle | raw }}
              </div>
            {% endif %}
          </h3>
        {% endif %}
      </div>

      <div class="flex items-center gap-x-2">
        {% if rightComponent is not null %}
          {{ rightComponent | raw }}
        {% endif %}
        <svg
          :class="{'rotate-180': open}"
          class="h-4 w-4 transition-transform duration-200"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </div>
    </div>
    <div
      x-show="open"
      x-cloak
      x-transition
      class="flex flex-col gap-y-4 border-t border-gray-100 p-3 dark:border-gray-800">
      {% for field in formFields %}
        {% if field.children is defined and field.children|length > 0 %}
          {{ form_row(field, { label: labelParent ? field.vars.label : false }) }}
        {% else %}
          {{ form_row(field, { label: label ? field.vars.label : false }) }}
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% else %}
  <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    {% if postTitle is not null or title is not null or dropdown is not null %}
      <div class="flex items-center justify-between p-3 {{ not isValid ? 'bg-red-100 dark:bg-red-900' }}">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
          {% if not isValid %}
            <span
              class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-red-900 align-super text-xs font-bold text-white dark:bg-red-500">
              {{- errorCount -}}
            </span>
          {% endif %}
          {{ title }}
        </h3>
        {% if dropdown is not null %}
          <div class="ml-2">
            {{ dropdown | raw }}
          </div>
        {% endif %}
      </div>
    {% endif %}
    <div class="flex flex-col gap-y-4 border-t border-gray-100 p-3 dark:border-gray-800">
      {% if preText is defined and preText is not null %}
        {{ preText | raw }}
      {% endif %}
      {% for field in formFields %}
        {% if field.children is defined and field.children|length > 0 %}
          {{ form_row(field, { label: labelParent ? field.vars.label : false }) }}
        {% else %}
          {{ form_row(field, { label: label ? field.vars.label : false }) }}
        {% endif %}
      {% endfor %}
      {% if postText is defined and postText is not null %}
        <div class="text-sm italic">
          {{ postText | raw }}
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}
{% endmacro %}
