{% comment %}
The body deliberately carries no `.collapse`: that class is display:none
without `.show`, which would hide a server-open panel permanently once
Alpine is off. `x-show` owns display here, seeded from `data-cf-open`.
{% endcomment %}
<div
  class="accordion {{ class }}"
  x-data="cfPanel"
  x-init="initPanel()"
  data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}"
>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        type="button"
        class="accordion-button{% if not open or open == 'false' %} collapsed{% endif %}"
        aria-controls="{{ id }}-body"
        aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
        :aria-expanded="open"
        :class="{ 'collapsed': !open }"
        @click="toggle()"
      >{{ title }}</button>
    </h2>
    <div
      id="{{ id }}-body"
      class="accordion-collapse"
      x-show="open"
      {% if not open or open == 'false' %}x-cloak{% endif %}
    >
      <div class="accordion-body">{{ slot }}</div>
    </div>
  </div>
</div>