{block name='productdetails-config-options'}
    {$configItemDescriptionLimit=$configItemDescriptionLimit|default:0}
    {foreach $Artikel->oKonfig_arr as $configGroup}
        {if $configGroup->getItemCount() > 0}
            {$configLocalization = $configGroup->getSprache()}
            {$configGroupHasImage = (strpos($configGroup->getImage(\JTL\Media\Image::SIZE_MD), $smarty.const.BILD_KEIN_ARTIKELBILD_VORHANDEN) === false)}
            {$kKonfiggruppe = $configGroup->getKonfiggruppe()}

            {block name='productdetails-config-container-group'}
                <div class="cfg-group js-cfg-group et-vertical-nav-anchor {if $configGroup@first}visited{/if}"
                    id="cfg-group-{$kKonfiggruppe}"
                    data-id="{$kKonfiggruppe}"
                >
                    {* Config Group Headline *}
                    {block name='productdetails-config-container-group-headline'}
                        <h4 class="cfg-group-headline">{$configLocalization->getName()}</h4>
                    {/block}

                    {* Info Badges to help guide the user (ie optional, select 1, select max X). Not in design, but keep for not*}
                    {block name='productdetails-config-container-group-info'}
                        <div class="cfg-group-info">
                            {if !empty($configGroup->getMin()) || !empty($configGroup->getMax())}
                                <span class="badge badge-info js-group-badge-checked">
                                    {if $configGroup->getMin() === 1 && $configGroup->getMax() === 1}
                                        {lang key='configChooseOneComponent' section='productDetails'}
                                    {elseif $configGroup->getMin() === $configGroup->getMax()}
                                        {lang key='configChooseNumberComponents' section='productDetails' printf=$configGroup->getMin()}
                                    {elseif !empty($configGroup->getMin()) && $configGroup->getMax()<$configGroup->getItemCount()}
                                        {lang key='configChooseMinMaxComponents' section='productDetails' printf=$configGroup->getMin()|cat:':::'|cat:$configGroup->getMax()}
                                    {elseif !empty($configGroup->getMin())}
                                            {lang key='configChooseMinComponents' section='productDetails' printf=$configGroup->getMin()}
                                    {elseif $configGroup->getMax()<$configGroup->getItemCount()}
                                        {lang key='configChooseMaxComponents' section='productDetails' printf=$configGroup->getMax()}
                                    {else}
                                        {lang key='optional'}
                                    {/if}
                                </span>
                            {elseif $configGroup->getMin() == 0}
                                <span class="badge badge-info js-group-badge-checked">{lang key='optional'}</span>
                            {/if}
                        </div>
                    {/block}

                    {* Configuration Group Error *}
                    {block name='productdetails-config-container-group-error'}
                        <div role="alert" class="alert alert-danger js-cfg-group-error" data-id="{$kKonfiggruppe}">
                            <div class="sr-only">x</div>
                        </div>
                    {/block}

                    {* Configuration Group Errors, Group Description and Group Image *}
                    {block name='productdetails-config-container-group-description'}
                        <div class="row group-description">
                            {if !empty($aKonfigerror_arr[$kKonfiggruppe])}
                                <div class="col col-12">
                                    <div role="alert" class="alert alert-danger">
                                        <div class="sr-only">x</div>
                                        {$aKonfigerror_arr[$kKonfiggruppe]}
                                    </div>
                                </div>
                            {/if}
                            {if $configLocalization->hatBeschreibung()}
                                <div class="col col-12 col-lg-{if $configGroupHasImage}9{else}12{/if} order-1 order-lg-0">
                                    {$configLocalization->getBeschreibung()}
                                </div>
                            {/if}
                            {if $configGroupHasImage}
                                <div class="col col-12 col-lg-3 offset-lg-{if $configLocalization->hatBeschreibung()}0{else}5{/if} order-0 order-lg-1">
                                    {include file='snippets/image.tpl' item=$configGroup square=false}
                                </div>
                            {/if}
                        </div>
                    {/block}

                    {* Items in this Group *}
                    {block name='productdetails-config-container-group-items'}
                        <div class="form-group">
                            {$viewType = $configGroup->getAnzeigeTyp()}

                            {* Checkbox / Radio / Multi Dropdown Item (ie Checkbox) *}
                            {if $viewType === $smarty.const.KONFIG_ANZEIGE_TYP_CHECKBOX
                                || $viewType === $smarty.const.KONFIG_ANZEIGE_TYP_RADIO
                                || $viewType === $smarty.const.KONFIG_ANZEIGE_TYP_DROPDOWN_MULTI
                            }
                                {block name='productdetails-config-container-group-item-type-swatch'}
                                    {foreach $configGroup->oItem_arr as $oItem}
                                        {$bSelectable = 0}
                                        {if $oItem->isInStock()}
                                            {$bSelectable = 1}
                                        {/if}
                                        {$kKonfigitem = $oItem->getKonfigitem()}
                                        {$checkboxActive = (isset($nKonfigitem_arr)
                                                && in_array($oItem->getKonfigitem(), $nKonfigitem_arr))
                                            || (!empty($aKonfigerror_arr)
                                                && isset($smarty.post.item)
                                                && isset($smarty.post.item[$kKonfiggruppe])
                                                && in_array($oItem->getKonfigitem(), $smarty.post.item[$kKonfiggruppe]))
                                            || ($oItem->getSelektiert()
                                                && !isset($kEditKonfig)
                                                && empty($aKonfigerror_arr))}
                                        {$cKurzBeschreibung = $oItem->getKurzBeschreibung()}
                                        {$cBeschreibung = $oItem->getBeschreibung()}
                                        {if !empty($cKurzBeschreibung)}
                                            {$cBeschreibung = $cKurzBeschreibung}
                                        {/if}

                                        {* Radio Button *}
                                        {if $viewType === $smarty.const.KONFIG_ANZEIGE_TYP_RADIO}
                                            {block name='productdetails-config-container-group-include-item-type-radio'}
                                                {include file="widgets/snippets/config_options_item_type.tpl" type="radio" isFirst=$oItem@first configItemDescriptionLimit=$configItemDescriptionLimit}
                                            {/block}
                                        {* Checkbox Button *}
                                        {else}
                                            {block name='productdetails-config-container-group-include-item-type-checkbox'}
                                                {include file="widgets/snippets/config_options_item_type.tpl" type="checkbox" isFirst=$oItem@first configItemDescriptionLimit=$configItemDescriptionLimit}
                                            {/block}
                                        {/if}
                                    {/foreach}
                                {/block}
                            {* Normal Dropdown Item Type *}
                            {elseif $viewType === $smarty.const.KONFIG_ANZEIGE_TYP_DROPDOWN}
                                {block name='productdetails-config-container-group-item-type-dropdown'}
                                    <div data-id="{$kKonfiggruppe}" class="config-option-dropdown row">
                                        {* Dropdown *}
                                        {block name='productdetails-config-container-group-item-type-dropdown-input'}
                                            <div class="col col-10 offset-2">
                                                {formgroup}
                                                    <select name="item[{$kKonfiggruppe}][]"
                                                        data-ref="{$kKonfiggruppe}"
                                                        {if $configGroup->getMin() > 0}required{/if}
                                                        aria-label="{$configLocalization->getName()}"
                                                        class="form-control custom-select"
                                                    >
                                                        <option value="">{lang key='pleaseChoose'}</option>
                                                        {foreach $configGroup->oItem_arr as $oItem}
                                                            {$bSelectable = 0}
                                                            {if $oItem->isInStock()}
                                                                {$bSelectable = 1}
                                                            {/if}

                                                            {block name='productdetails-config-container-group-item-type-dropdown-input-option'}
                                                                <option value="{$oItem->getKonfigitem()}"
                                                                        id="item{$oItem->getKonfigitem()}"
                                                                        {if empty($bSelectable)} disabled{/if}
                                                                        {if isset($nKonfigitem_arr)} data-selected="{if in_array($oItem->getKonfigitem(), $nKonfigitem_arr)}true{else}false{/if}"
                                                                        {else}{if $oItem->getSelektiert() && empty($aKonfigerror_arr)}selected="selected"{/if}{/if}>
                                                                    {$oItem->getName()}{if empty($bSelectable)} - {lang section='productDetails' key='productOutOfStock'}{/if}
                                                                    {if $smarty.session.Kundengruppe->mayViewPrices()}
                                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                                        {if $oItem->hasRabatt() && $oItem->showRabatt()}({$oItem->getRabattLocalized()} {lang key='discount'})&nbsp;{elseif $oItem->hasZuschlag() && $oItem->showZuschlag()}({$oItem->getZuschlagLocalized()} {lang key='additionalCharge'})&nbsp;{/if}
                                                                        {$oItem->getPreisLocalized()}
                                                                    {/if}
                                                                </option>
                                                            {/block}
                                                        {/foreach}
                                                    </select>
                                                {/formgroup}
                                            </div>
                                        {/block}

                                        {* Select Item Details *}
                                        {block name='productdetails-config-container-group-item-type-dropdown-item-details'}
                                            <div class="col-12">
                                                {foreach $configGroup->oItem_arr as $oItem}
                                                    {$bSelectable = 0}
                                                    {if $oItem->isInStock()}
                                                        {$bSelectable = 1}
                                                    {/if}
                                                    {$kKonfigitem = $oItem->getKonfigitem()}
                                                    {$cKurzBeschreibung = $oItem->getKurzBeschreibung()}
                                                    {$cBeschreibung = $oItem->getBeschreibung()}
                                                    {if !empty($cKurzBeschreibung)}
                                                        {$cBeschreibung = $cKurzBeschreibung}
                                                    {/if}

                                                    {block name='productdetails-config-container-group-item-type-dropdown-input-item-details-item'}
                                                        <div id="drpdwn_qnt_{$oItem->getKonfigitem()}" class="collapse cfg-drpdwn-item {if isset($nKonfigitem_arr) && in_array($oItem->getKonfigitem(), $nKonfigitem_arr)}show{/if}">
                                                            {block name='productdetails-config-container-group-include-item-type-dropdown'}
                                                                {include file="widgets/snippets/config_options_item_type.tpl" type="dropdown" isFirst=$oItem@first configItemDescriptionLimit=$configItemDescriptionLimit}
                                                            {/block}
                                                        </div>
                                                    {/block}
                                                {/foreach}
                                            </div>
                                        {/block}
                                    </div>
                                {/block}
                            {/if}
                        </div>
                    {/block}
                </div>
            {/block}
        {/if}
    {/foreach}
{/block}
