{#
/**
 * @file
 * Space Accordion Item Component.
 *
 * Props:
 * - label: String. The title of the accordion item.
 *   Example: 'Accordion title'.
 *
 * - content: String. The content inside the accordion.
 *   Example: 'Accordion content'.
 */
#}

{# Template #}
{% block accordion_item_block %}
  <div class="accordion-item w-full overflow-hidden">
    <div class="accordion-item-inner">
      <a href="javascript:void(0)" class="ac-title block px-0 p-2 cursor-pointer flex" tabindex='0'>
        <span class="sr-only ac-accessibilty-txt">{{ 'click to open accordion' }}</span>
        <span class="ga-acc-title">{{ label }}</span>
        <span class="icons flex ml-auto items-center">
          <span class="icon chevronDown closed"></span>
          <div class="icon circle-plus closed">
            <div class="circle">
              <div class="horizontal"></div>
              <div class="vertical"></div>
            </div>
          </div>
        </span>
      </a>

      <div class="accordion-content overflow-hidden leading-normal">
        <div class="ac-content" tabindex='0'>{{ content }}</div>
      </div>
    </div>
  </div>
{% endblock %}
