{block name='comparelist-index'}
    {block name='comparelist-index-include-header'}
        {if empty($isAjax)}
            {include file='layout/header.tpl'}
        {/if}
    {/block}

    {et_isShopVersionAtLeast value="5.1.0" assign='shopIsAtLeast51'}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    {et_isShopVersionAtLeast value="5.6.0-rc.2" assign='shopIsAtLeast56'}
    {$languageID = JTL\Shop::getLanguageID()}
    {$fallback = $languageID}
    {$isDefault = JTL\Language\LanguageHelper::isDefaultLanguageActive()}
    {if !$isDefault}
        {$fallback = JTL\Language\LanguageHelper::getDefaultLanguage()->getId()}
    {/if}
    {assign var='descriptionLength' value=200}

    {block name='comparelist-index-content'}
        {block name='comparelist-index-heading'}
            {if empty($isAjax)}
                {opcMountPoint id='opc_before_heading' inContainer=false}
            {/if}
            <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if}">
                <h1>{if isset($Link) && !empty($Link->getTitle())}{$Link->getTitle()}{else}{lang key='compare' section='global'}{/if}</h1>
            </div>
        {/block}
        {block name='comparelist-index-include-extension'}
            {if empty($isAjax)}
                {include file='snippets/extension.tpl'}
            {/if}
        {/block}

        {if isset($oVergleichsliste->oArtikel_arr) && count($oVergleichsliste->oArtikel_arr) > 0}
            {block name='comparelist-index-filter'}
                {if empty($isAjax)}
                    {opcMountPoint id='opc_before_filter' inContainer=false}
                {/if}
                <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if}">
                    <div id="filter-checkboxes">
                        {block name='comparelist-index-filter-buttons'}
                            <div class="row">
                                <div class="col">
                                    {include file="widgets/base/button.tpl" variant="secondary" classes="et-dropdown-toggle" dataToggle="collapse" dataTarget="#collapse-checkboxes" label="{lang key='filter'}"}
                                </div>
                            </div>
                        {/block}
                        {block name='comparelist-index-filter-items'}
                            <div id="collapse-checkboxes" class="collapse comparelist-checkboxes">
                                <div class="row">
                                    <div class="col">
                                        <div class="btn-group btn-group-sm">
                                            {include file="widgets/base/button.tpl" variant="secondary" id="check-none" label="{lang key='showNone'}"}
                                            {include file="widgets/base/button.tpl" variant="secondary" id="check-all" label="{lang key='showAll'}"}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    {foreach $prioRows as $row}
                                        {if $row['key'] !== 'Merkmale' && $row['key'] !== 'Variationen'}
                                            <div class="col col-6 col-md-4 col-lg-3 col-xl-2 comparelist-checkbox-wrapper">
                                                <div class="custom-control custom-checkbox custom-control-inline">
                                                    {assign var=id value=uniqid()}

                                                    <input class="custom-control-input comparelist-checkbox"
                                                        type="checkbox" id="{$id}"
                                                        checked
                                                        data-id="{$row['key']}"
                                                    />

                                                    <label for="{$id}" class="custom-control-label">
                                                        <span class="text-truncate">{$row['name']}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        {/if}
                                        {if $row['key'] === 'Merkmale'}
                                            {foreach $oMerkmale_arr as $characteristic}
                                                <div class="col col-6 col-md-4 col-lg-3 col-xl-2 comparelist-checkbox-wrapper">
                                                    <div class="custom-control custom-checkbox custom-control-inline">
                                                        {assign var=id value=uniqid()}

                                                        <input class="custom-control-input comparelist-checkbox"
                                                            type="checkbox" id="{$id}"
                                                            checked
                                                            data-id="attr-{if $shopIsAtLeast52}{$characteristic->getName()}{else}{$characteristic->cName}{/if}"
                                                        />

                                                        <label for="{$id}" class="custom-control-label">
                                                            <div class="text-truncate">
                                                                {if $shopIsAtLeast52}{$characteristic->getName()|escape:'html'}{else}{$characteristic->cName|escape:'html'}{/if}
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div>
                                            {/foreach}
                                        {/if}
                                        {if $row['key'] === 'Variationen'}
                                            {foreach $oVariationen_arr as $oVariationen}
                                                <div class="col col-6 col-md-4 col-lg-3 col-xl-2 comparelist-checkbox-wrapper">
                                                    <div class="custom-control custom-checkbox custom-control-inline">
                                                        {assign var=id value=uniqid()}

                                                        <input class="custom-control-input comparelist-checkbox"
                                                            type="checkbox" id="{$id}"
                                                            checked
                                                            data-id="vari-{$oVariationen->cName}"
                                                        />

                                                        <label for="{$id}" class="custom-control-label">
                                                            <div class="text-truncate">{$oVariationen->cName}</div>
                                                        </label>
                                                    </div>
                                                </div>
                                            {/foreach}
                                        {/if}
                                    {/foreach}
                                </div>
                            </div>
                        {/block}
                    </div>
                </div>
            {/block}
            {block name='comparelist-index-products-wrapper'}
                <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if}">
                    {block name='comparelist-index-products-header-label'}
                        {* This is not really helpful in our opinion - why hide labels and why do it independently of selected filters? *}
                    {/block}
                    <div class="comparelist">
                        <table class="table table-hover table-responsive">
                            <thead>
                            {block name='comparelist-index-products-header'}
                                <tr>
                                    <th class="sticky-top comparelist-label">&nbsp;</th>
                                    {foreach $oVergleichsliste->oArtikel_arr as $oArtikel}
                                        <th class="comparelist-item sticky-top min-w" data-product-id-cl="{$oArtikel->kArtikel}">
                                            <div class="stretched">
                                                <div>
                                                    {block name='comparelist-index-products-header-delete'}
                                                        <div class="delete-link-times">
                                                            <a href="{$oArtikel->cURLDEL}"
                                                                class="text-decoration-none-util"
                                                                title="{lang key='removeFromCompareList' section='comparelist'}"
                                                                aria-label="{lang key='removeFromCompareList' section='comparelist'}"
                                                                data-toggle="tooltip"
                                                            >
                                                                <i class="{et_getIcon key="remove"}"></i>
                                                            </a>
                                                        </div>
                                                    {/block}
                                                    {block name='comparelist-index-products-header-image'}
                                                        <a href="{$oArtikel->cURLFull}">
                                                            {include file='snippets/image.tpl' item=$oArtikel srcSize='xs' square=false class='comparelist-item-image' sizes='200px'}
                                                        </a>
                                                    {/block}
                                                </div>
                                                {block name='comparelist-index-products-header-title'}
                                                    <span>
                                                        <a href="{$oArtikel->cURLFull}">{$oArtikel->cName}</a>
                                                    </span>
                                                {/block}
                                                {block name='comparelist-index-include-rating'}
                                                    {include file='productdetails/rating.tpl' stars=$oArtikel->fDurchschnittsBewertung link=$oArtikel->cURLFull}
                                                {/block}
                                                {block name='comparelist-index-products-header-availability'}
                                                    {if $oArtikel->getOption('nShowOnlyOnSEORequest', 0) === 1}
                                                        <p>{lang key='productOutOfStock' section='productDetails'}</p>
                                                    {elseif $oArtikel->Preise->fVKNetto == 0 && $Einstellungen.global.global_preis0 === 'N'}
                                                        <p>{lang key='priceOnApplication' section='global'}</p>
                                                    {else}
                                                        {block name='comparelist-index-include-price'}
                                                            {include file='productdetails/price.tpl' Artikel=$oArtikel tplscope='detail'}
                                                        {/block}
                                                    {/if}
                                                {/block}
                                            </div>
                                        </th>
                                    {/foreach}
                                </tr>
                            {/block}
                            </thead>
                            {block name='comparelist-index-products-rows'}
                            {foreach $prioRows as $row}
                                {if $row['key'] !== 'Merkmale' && $row['key'] !== 'Variationen'}
                                    <tr class="comparelist-row" data-id="row-{$row['key']}">
                                    {block name='comparelist-index-products-row-name'}
                                        <td class="comparelist-label">
                                            {$row['name']|default:''|truncate:20}
                                        </td>
                                    {/block}
                                    {block name='comparelist-index-products'}
                                        {block name='comparelist-index-products-row-content'}{* Since 5.3.0 *}
                                        {foreach $oVergleichsliste->oArtikel_arr as $oArtikel}
                                            {if $row['key'] === 'verfuegbarkeit'}
                                                <td data-product-id-cl="{$oArtikel->kArtikel}">
                                                    {block name='comparelist-index-products-row-abailability'}
                                                        {block name='comparelist-index-products-includes-stock-availability'}
                                                            {include file='productdetails/stock.tpl' Artikel=$oArtikel availability=true}
                                                        {/block}
                                                        {if $oArtikel->nErscheinendesProdukt}
                                                            <div>
                                                                {lang key='productAvailableFrom' section='global'}: <strong>{$oArtikel->Erscheinungsdatum_de}</strong>
                                                                {if $Einstellungen.global.global_erscheinende_kaeuflich === 'Y' && $oArtikel->inWarenkorbLegbar == 1}
                                                                    ({lang key='preorderPossible' section='global'})
                                                                {/if}
                                                            </div>
                                                        {/if}
                                                    {/block}
                                                </td>
                                            {elseif $row['key'] === 'lieferzeit'}
                                                <td data-product-id-cl="{$oArtikel->kArtikel}">
                                                    {block name='comparelist-index-products-includes-stock-shipping-time'}
                                                        {include file='productdetails/stock.tpl' Artikel=$oArtikel shippingTime=true}
                                                    {/block}
                                                </td>
                                            {elseif $oArtikel->$row['key'] !== ''}
                                                <td style="min-width: {$Einstellungen.vergleichsliste.vergleichsliste_spaltengroesse}px" data-product-id-cl="{$oArtikel->kArtikel}">
                                                    {if $row['key'] === 'fArtikelgewicht' || $row['key'] === 'fGewicht'}
                                                        {block name='comparelist-index-products-row-weight'}
                                                            {$oArtikel->$row['key']} {lang key='weightUnit' section='comparelist'}
                                                        {/block}
                                                    {elseif $row['key'] === 'cBeschreibung' || $row['key'] === 'cKurzBeschreibung'}
                                                        {block name='comparelist-index-products-row-description'}
                                                            {if mb_strlen($oArtikel->$row['key']) < $descriptionLength}
                                                                {$oArtikel->$row['key']}
                                                            {else}
                                                                <div>
                                                                    <span>
                                                                        {mb_substr($oArtikel->$row['key'], 0, $descriptionLength)}
                                                                    </span>
                                                                    <span id="{"read-more-{$oArtikel->kArtikel}-"|cat:$row['key']}" class="collapse">
                                                                        {mb_substr($oArtikel->$row['key'], $descriptionLength)}
                                                                    </span>
                                                                </div>
                                                                {block name='comparelist-index-products-row-description-more'}
                                                                    <button class="btn btn-link comparelist-item-more" data-toggle='collapse' data-target="{"#read-more-{$oArtikel->kArtikel}-"|cat:$row['key']}">
                                                                        {lang key='more'}
                                                                    </button>
                                                                {/block}
                                                            {/if}
                                                        {/block}
                                                    {else}
                                                        {block name='comparelist-index-products-row-default'}
                                                            {$oArtikel->$row['key']}
                                                        {/block}
                                                    {/if}
                                                </td>
                                            {else}
                                                {block name='comparelist-index-products-row-none'}
                                                    <td data-product-id-cl="{$oArtikel->kArtikel}">--</td>
                                                {/block}
                                            {/if}
                                        {/foreach}
                                        {/block}
                                    {/block}
                                    </tr>
                                {elseif $row['key'] === 'Merkmale'}
                                    {block name='comparelist-index-characteristics'}
                                        {if $shopIsAtLeast52}
                                            {foreach $oMerkmale_arr as $characteristic}
                                                {$name = $characteristic->getName($languageID)|default:$characteristic->getName($fallback)}
                                                <tr class="comparelist-row" data-id="row-attr-{$name}">
                                                    <td class="comparelist-label">
                                                        {$name|truncate:20}
                                                    </td>
                                                    {foreach $oVergleichsliste->oArtikel_arr as $oArtikel}
                                                        <td style="min-width: {$Einstellungen.vergleichsliste.vergleichsliste_spaltengroesse}px" data-product-id-cl="{$oArtikel->kArtikel}">
                                                            {if count($oArtikel->oMerkmale_arr) > 0}
                                                                {foreach $oArtikel->oMerkmale_arr as $oMerkmaleArtikel}
                                                                    {$innerName = $oMerkmaleArtikel->getName($languageID)|default:$oMerkmaleArtikel->getName($fallback)}
                                                                    {if $name === $innerName}
                                                                        {foreach $oMerkmaleArtikel->getCharacteristicValues() as $characteristicValue}
                                                                            {$characteristicValue->getValue()}{if !$characteristicValue@last}, {/if}
                                                                        {/foreach}
                                                                    {/if}
                                                                {/foreach}
                                                            {else}
                                                                --
                                                            {/if}
                                                        </td>
                                                    {/foreach}
                                                </tr>
                                            {/foreach}
                                        {else}
                                            {foreach $oMerkmale_arr as $oMerkmale}
                                                <tr class="comparelist-row" data-id="row-attr-{$oMerkmale->cName}">
                                                    <td class="comparelist-label">
                                                        {$oMerkmale->cName|truncate:20}
                                                    </td>
                                                    {foreach $oVergleichsliste->oArtikel_arr as $oArtikel}
                                                        <td style="min-width: {$Einstellungen.vergleichsliste.vergleichsliste_spaltengroesse}px" data-product-id-cl="{$oArtikel->kArtikel}">
                                                            {if count($oArtikel->oMerkmale_arr) > 0}
                                                                {foreach $oArtikel->oMerkmale_arr as $oMerkmaleArtikel}
                                                                    {if $oMerkmale->cName == $oMerkmaleArtikel->cName}
                                                                        {foreach $oMerkmaleArtikel->oMerkmalWert_arr as $oMerkmalWert}
                                                                            {$oMerkmalWert->cWert}{if !$oMerkmalWert@last}, {/if}
                                                                        {/foreach}
                                                                    {/if}
                                                                {/foreach}
                                                            {else}
                                                                --
                                                            {/if}
                                                        </td>
                                                    {/foreach}
                                                </tr>
                                            {/foreach}
                                        {/if}
                                    {/block}
                                {elseif $row['key'] === 'Variationen'}
                                    {block name='comparelist-index-variations'}
                                        {foreach $oVariationen_arr as $oVariationen}
                                            <tr class="comparelist-row" data-id="row-vari-{$oVariationen->cName}">
                                                {block name='comparelist-index-variation-name'}
                                                    <td class="comparelist-label">
                                                        {$oVariationen->cName|default:''|truncate:20}
                                                    </td>
                                                {/block}
                                                {foreach $oVergleichsliste->oArtikel_arr as $oArtikel}
                                                    <td data-product-id-cl="{$oArtikel->kArtikel}">
                                                        {if isset($oArtikel->oVariationenNurKind_arr) && count($oArtikel->oVariationenNurKind_arr) > 0}
                                                            {foreach $oArtikel->oVariationenNurKind_arr as $oVariationenArtikel}
                                                                {if $oVariationen->cName == $oVariationenArtikel->cName}
                                                                    {foreach $oVariationenArtikel->Werte as $oVariationsWerte}
                                                                        {$oVariationsWerte->cName}
                                                                        {if $oArtikel->nVariationOhneFreifeldAnzahl == 1 && ($oArtikel->kVaterArtikel > 0 || $oArtikel->nIstVater == 1)}
                                                                            {assign var=kEigenschaftWert value=$oVariationsWerte->kEigenschaftWert}
                                                                            ({$oArtikel->oVariationDetailPreisKind_arr[$kEigenschaftWert]->Preise->cVKLocalized[$NettoPreise]}{if !empty($oArtikel->oVariationDetailPreisKind_arr[$kEigenschaftWert]->Preise->PreisecPreisVPEWertInklAufpreis[$NettoPreise])}, {$oArtikel->oVariationDetailPreisKind_arr[$kEigenschaftWert]->Preise->PreisecPreisVPEWertInklAufpreis[$NettoPreise]}{/if})
                                                                        {/if}
                                                                    {/foreach}
                                                                {/if}
                                                            {/foreach}
                                                        {elseif isset($oArtikel->Variationen) && count($oArtikel->Variationen) > 0}
                                                            {foreach $oArtikel->Variationen as $oVariationenArtikel}
                                                                {if $oVariationen->cName == $oVariationenArtikel->cName}
                                                                    {foreach $oVariationenArtikel->Werte as $oVariationsWerte}
                                                                        {$oVariationsWerte->cName}
                                                                        {if $Einstellungen.artikeldetails.artikel_variationspreisanzeige == 1 && $oVariationsWerte->fAufpreisNetto != 0}
                                                                            ({$oVariationsWerte->cAufpreisLocalized[$NettoPreise]}{if !empty($oVariationsWerte->cPreisVPEWertAufpreis[$NettoPreise])}, {$oVariationsWerte->cPreisVPEWertAufpreis[$NettoPreise]}{/if})
                                                                        {elseif $Einstellungen.artikeldetails.artikel_variationspreisanzeige == 2 && $oVariationsWerte->fAufpreisNetto != 0}
                                                                            ({$oVariationsWerte->cPreisInklAufpreis[$NettoPreise]}{if !empty($oVariationsWerte->cPreisVPEWertInklAufpreis[$NettoPreise])}, {$oVariationsWerte->cPreisVPEWertInklAufpreis[$NettoPreise]}{/if})
                                                                        {/if}
                                                                        {if !$oVariationsWerte@last},{/if}
                                                                    {/foreach}
                                                                {/if}
                                                            {/foreach}
                                                        {else}
                                                            &nbsp;
                                                        {/if}
                                                    </td>
                                                {/foreach}
                                            </tr>
                                        {/foreach}
                                    {/block}
                                {/if}
                            {/foreach}
                            {/block}
                        </table>
                    </div>
                    {block name='comparelist-index-products-header-delete-all'}
                        {if $shopIsAtLeast51}
                            {include file="widgets/base/button.tpl" variant="danger" classes="comparelist-delete-all btn-sm" href="{get_static_route id='vergleichsliste.php'}?delete=all" id="delete-all" title="{lang key='comparelistDeleteAll' section='comparelist'}" label="{lang key='comparelistDeleteAll' section='comparelist'}"}
                        {/if}
                    {/block}
                </div>
            {/block}
        {else}
            {block name='comparelist-index-empty'}
                <div class="container{if isset($Link) && $Link->getIsFluid() === true}-fluid{/if}">
                    <div class="row">
                        <div class="col et-comparelist-empty">
                            {lang key='compareListNoItems'}
                        </div>
                    </div>
                </div>
            {/block}
        {/if}

        {if !empty($isAjax) || (isset($bAjaxRequest) && $bAjaxRequest)}
            {block name='comparelist-index-script-remove'}
                {inline_script}<script>
                    {if $shopIsAtLeast56}
                        $('.modal .delete-link-times a').click(function(e) {
                            e.preventDefault();
                            $(this).closest('.comparelist-item').remove();
                            $.ajax(e.currentTarget.href);
                            return false;
                        });
                    {else}
                        $('.modal a.remove').click(function(e) {
                            var kArtikel = $(e.currentTarget).data('id');
                            $('section.box-compare li[data-id="' + kArtikel + '"]').remove();
                            eModal.ajax({
                                size: 'lg',
                                url: e.currentTarget.href,
                                title: '{lang key='compare' section='global' addslashes=true}',
                                keyboard: true,
                                tabindex: -1
                            });
                            return false;
                        });
                    {/if}

                    new function(){
                        var clCount = {if isset($oVergleichsliste->oArtikel_arr)}{count($oVergleichsliste->oArtikel_arr)}{else}0{/if};
                        $('.navbar-nav .compare-list-menu .badge em').html(clCount);
                        if (clCount > 1) {
                            $('section.box-compare .panel-body').removeClass('hidden');
                        } else {
                            $('.navbar-nav .compare-list-menu .link_to_comparelist').removeAttr('href').removeClass('popup');
                            eModal.close();
                        }
                    }();
                </script>{/inline_script}
            {/block}
        {/if}
        {block name='comparelist-index-script-check'}
            {inline_script}<script>
                $(document).ready(function () {
                    $('.comparelist-checkbox').on('change', function () {
                        $('[data-id="row-' + $(this).data('id') + '"]').toggleClass('d-none');
                        if($('.comparelist-checkbox:checked').length) {
                            $('.comparelist-label').removeClass('d-none');
                        } else {
                            $('.comparelist-label').addClass('d-none');
                        }
                    });
                    $('#check-all').on('click', function () {
                        $('.comparelist-checkbox').prop('checked', true);
                        $('.comparelist-row').removeClass('d-none');
                        $('.comparelist-label').removeClass('d-none');
                    });
                    $('#check-none').on('click', function () {
                        $('.comparelist-checkbox').prop('checked', false);
                        $('.comparelist-row').addClass('d-none');
                        $('.comparelist-label').addClass('d-none');
                    });
                    $('#switch-label').on('click', function () {
                        $('.comparelist-label').toggleClass('d-none');
                    });
                });
            </script>{/inline_script}
        {/block}
    {/block}

    {block name='comparelist-index-include-footer'}
        {if empty($isAjax)}
            {include file='layout/footer.tpl'}
        {/if}
    {/block}
{/block}
