<div class="bg-base-100 border-base-300 border-2 join-item {{ base_classes }}"
     x-data="{ expanded: {% if active %}true{% else %}false{% endif %} }">

  <div class="font-medium text-sm cursor-pointer p-4 flex w-full items-center justify-between gap-4 text-left {{ title_classes }}"
       @click="expanded = ! expanded">

    <div>
      {{ title }}
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true" x-bind:class="expanded  ?  'rotate-180'  :  ''">
       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
    </svg>
  </div>

  <div class="bg-base-200 p-4 {{ content_classes }}"
       x-show="expanded"
       x-collapse>
    {{ content }}
    </div>
</div>
