{$uid = $instance->getUid()}

<div class="{if !$isPreview}accordion{/if} opc-Accordion {$instance->getStyleClasses()}" id={$uid}
  style={$instance->getStyleString()}>
  {$htag = 'h'|cat:$instance->getProperty('level')}
  <{$htag} style="{$instance->getStyleString()} text-align:{$instance->getProperty('align')}"
    class="{$instance->getAnimationClass()} {$instance->getStyleClasses()}"
    {$instance->getAnimationDataAttributeString()}>
    {$instance->getProperty('text')|escape:'html'}
  </{$htag}>

  {foreach $instance->getProperty('groups') as $i => $group}
    {$groupId = $uid|cat:'-'|cat:$i}
    {$areaId = 'group-'|cat:$i}
    {$isFirstExpanded = $i === 0 && $instance->getProperty('expanded') === true}

    {if $isPreview}
      <div class="opc-Accordion-group">
        <div id="heading-{$groupId}">
          <a href="#" data-toggle="collapse" data-target="#{$groupId}" class="opc-Accordion-head
                        {if !$isFirstExpanded} collapsed{/if}" data-parent="#{$uid}">
            {$group|escape:'html'} <i class="fas fa-chevron-up"></i>
          </a>
        </div>
        {collapse
            id=$groupId
            visible = $isFirstExpanded
            aria=['labelledby' => 'heading-'|cat:$groupId]
           class='opc-Accordion-collapse'
            }
        <div class="opc-area" data-area-id="{$areaId}">
          {$instance->getSubareaPreviewHtml($areaId)}
        </div>
        {/collapse}
        {*{/card}*}
      </div>
    {else}
      {if $i === 0 && $instance->getProperty('expanded') === true}
        {$ariaExpanded = 'true'}
      {else}
        {$ariaExpanded = 'false'}
      {/if}

      {card no-body=true class='opc-Accordion-group'}
      {cardheader id='heading-'|cat:$groupId}

      <h4 style="margin-bottom: 0">
        {button
             data=['toggle' => 'collapse', 'target' => '#'|cat:$groupId, 'parent' => '#'|cat:$uid]
              aria=['expanded' => $ariaExpanded, 'controls' => $groupId]
             class='opc-Accordion-head'
             }
        {$group|escape:'html'}
        {/button}
      </h4>
      {/cardheader}
      {collapse
            id=$groupId
            visible = $i === 0 && $instance->getProperty('expanded') === true
            data=['parent' => '#'|cat:$uid]
           aria=['labelledby' => 'heading-'|cat:$groupId]
           class='opc-Accordion-collapse'
          }
      {cardbody class='opc-area' data=['area-id' => $areaId]}
      {$instance->getSubareaFinalHtml($areaId)}
      {/cardbody}
      {/collapse}
      {/card}
    {/if}
  {/foreach}
</div>
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {assign var="groupCount" value=$instance->getProperty('groups')|@count}
      {foreach $instance->getProperty('groups') as $i => $group}
        {
          "@type": "Question",
          "name": "{$group|regex_replace:'/^[^\p{L}\p{N}]+/u':''|escape:'html'}",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "{$instance->getSubareaFinalHtml('group-'|cat:$i)|strip_tags|trim|escape:'html'}"
          }
          } {if $i < $groupCount-1}, {/if}
        {/foreach}
      ]
    }
</script>
