{extends file="widgets/base/widget.tpl"}

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_Accordion.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container {
                     {if !empty($et_Accordion.colorBackground)}background-color: {$et_Accordion.colorBackground};{/if}
                     {if !empty($et_Accordion.colorFont)}color: {$et_Accordion.colorFont};{/if}
                }
                {* Set correct color to fade out text *}
                {if !empty($et_Accordion.colorBackground)}
                    #{$et_BaseWidget.cssId} .et-shorten-to-text:after {
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, {$et_Accordion.colorBackground} 100%);
                    }
                {/if}
                #{$et_BaseWidget.cssId} .card-body {
                    {if !empty($et_Accordion.colorBackgroundContent)}background-color: {$et_Accordion.colorBackgroundContent};{/if}
                    {if !empty($et_Accordion.colorFontContent)}color: {$et_Accordion.colorFontContent};{/if}
                }

                #{$et_BaseWidget.cssId} .et-accordion-item .card-header {
                    {if !empty($et_Accordion.colorTitleBackground)}background-color:{$et_Accordion.colorTitleBackground};{/if}
                    {if !empty($et_Accordion.colorTitleText)}color:{$et_Accordion.colorTitleText};{/if}
                }
                #{$et_BaseWidget.cssId} .card {
                    {if !empty($et_Accordion.colorBorder)}border-color:{$et_Accordion.colorBorder};{elseif !empty($et_Accordion.colorTitleBackground)}border-color: {$et_Accordion.colorTitleBackground};{/if}
                }
            </style>
        {/if}
        {if !empty($et_Accordion.contentPadding)}
            <style type="text/css">
                {if isset($et_Accordion.contentPadding.xs) && $et_Accordion.contentPadding.xs !== ''}
                @media (max-width: {$et_global.breakpoints.xsMax}px) {
                    #{$et_BaseWidget.cssId} .card-body {
                        padding: {$et_Accordion.contentPadding.xs}px;
                    }
                }
                {/if}
                {if isset($et_Accordion.contentPadding.sm) && $et_Accordion.contentPadding.sm !== ''}
                @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                    #{$et_BaseWidget.cssId} .card-body {
                        padding: {$et_Accordion.contentPadding.sm}px;
                    }
                }
                {/if}

                {if isset($et_Accordion.contentPadding.md) && $et_Accordion.contentPadding.md !== ''}
                @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                    #{$et_BaseWidget.cssId} .card-body {
                        padding: {$et_Accordion.contentPadding.md}px;
                    }
                }
                {/if}

                {if isset($et_Accordion.contentPadding.lg) && $et_Accordion.contentPadding.lg !== ''}
                @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                    #{$et_BaseWidget.cssId} .card-body {
                        padding: {$et_Accordion.contentPadding.lg}px;
                    }
                }
                {/if}

                {if isset($et_Accordion.contentPadding.xl) && $et_Accordion.contentPadding.xl !== ''}
                @media (min-width: {$et_global.breakpoints.xlMin}px) {
                    #{$et_BaseWidget.cssId} .card-body {
                        padding: {$et_Accordion.contentPadding.xl}px;
                    }
                }
                {/if}
            </style>
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {if is_array($et_Accordion.items) && count($et_Accordion.items) > 0}
            {block name="et-accordion-headline"}
                {include file="widgets/base/textfield.tpl" value=$et_Accordion.headline type="h2" asRow=true classes="et-widget-headline{if isset($et_Accordion.headline2) && !empty($et_Accordion.headline2.value)} et-has-second-headline{/if}"}
                {if isset($et_Accordion.headline2) && !empty($et_Accordion.headline2.value)}
                    {include file="widgets/base/textfield.tpl" value=$et_Accordion.headline2 asRow=true type="div" classes="et-widget-headline et-accordion-sub-headline"}
                {/if}
            {/block}
            <div class="et-accordion-items et-accordion-item-style-{$et_Accordion.itemHeadlineStyle}{if !empty($et_Accordion.columnsPerRow.xs)} et-column-count-xs-{$et_Accordion.columnsPerRow.xs}{/if}{if !empty($et_Accordion.columnsPerRow.sm)} et-column-count-sm-{$et_Accordion.columnsPerRow.sm}{/if}{if !empty($et_Accordion.columnsPerRow.md)} et-column-count-md-{$et_Accordion.columnsPerRow.md}{/if}{if !empty($et_Accordion.columnsPerRow.lg)} et-column-count-lg-{$et_Accordion.columnsPerRow.lg}{/if}{if !empty($et_Accordion.columnsPerRow.xl)} et-column-count-xl-{$et_Accordion.columnsPerRow.xl}{/if}" id="accordion-items-{$et_BaseWidget.id}"{if $et_Accordion.structuredDataType === 'faq'} itemscope itemtype="https://schema.org/FAQPage"{/if}>
                {foreach from=$et_Accordion.items item="item" name="accordionForEach"}
                    {if isset($item.title.value, $item.content) && $item.title.value !== '' && $item.content !== ''}
                        <div class="card et-accordion-item"{if $et_Accordion.structuredDataType === 'faq'} itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"{/if}>
                            {if $et_Accordion.structuredDataType === 'faq'}<meta itemprop="name" content="{$item.title.value|strip_tags|escape:'html'}">{/if}
                            <div class="card-header" id="accordion-item-heading-{$et_BaseWidget.id}-{$item.id}">
                                <div class="et-accordion-item-heading et-collapse" data-toggle="collapse" data-target="#et-accordion-item-content-{$et_BaseWidget.id}-{$item.id}" aria-expanded="{if $et_Accordion.initiallyOpen && $smarty.foreach.accordionForEach.index === 0}true{else}false{/if}" aria-controls="et-accordion-item-content-{$et_BaseWidget.id}-{$item.id}" role="button">
                                    {include file="widgets/base/textfield.tpl" value=$item.title type='h3' isCollapseControl=true}
                                </div>
                            </div>
                            <div id="et-accordion-item-content-{$et_BaseWidget.id}-{$item.id}" class="et-accordion-item-content collapse{if $et_Accordion.initiallyOpen && $smarty.foreach.accordionForEach.index === 0} show{/if}" aria-labelledby="accordion-item-heading-{$et_BaseWidget.id}-{$item.id}"{if $et_Accordion.singleDisplayMode} data-parent="#accordion-items-{$et_BaseWidget.id}"{/if}{if $et_Accordion.structuredDataType === 'faq'} itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"{/if}>
                                <div class="card-body"{if $et_Accordion.structuredDataType === 'faq'} itemprop="text"{/if}>
                                    {$item.content}
                                </div>
                            </div>
                        </div>
                    {/if}
                {/foreach}
            </div>
        {/if}
    {/block}
{/strip}