{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
    <header class="control-header">
        <h2>{$this->getAttribute('frontendTitle')}</h2>
    </header>
{/if}

{if $this->getAttribute('content') != ""}
    <div class="control-content default-content">
        {$this->getAttribute('content')}
    </div>
{/if}

<div class="control-template">
    <form data-name="product-picker-options"
          class="quiqqer-products-controls-product-productPicker__options quiqqer-products-controls-product-productPicker__options--{$sheetOptionsStyle}"
    >
        <div class="inner">
            {if $sheetOptionsStyle === 'select'}
                <label class="visually-hidden" for="interval">
                    {locale group='quiqqer/products' var='frontend.productPicker.sheetOptionsStyle.select.text'}
                </label>

                <select name="interval" id="interval">
                    {foreach $sheetOptions as $option}
                    <option value="{$option.id}">{$option.label}</option>
                    {/foreach}
                </select>
            {elseif $sheetOptionsStyle === 'button-style1'}
                {foreach $sheetOptions as $option}
                <label>
                    <input type="radio" name="interval" value="{$option.id}" />
                    <span class="btn">{$option.label}</span>
                </label>
                {/foreach}
            {else}
            {foreach $sheetOptions as $option}
            <label>
                <input type="radio" name="interval" value="{$option.id}" />
                <span>{$option.label}</span>
            </label>
            {/foreach}
            {/if}
        </div>
    </form>

    <div data-name="product-picker-slides" class="quiqqer-products-controls-product-productPicker__sheets">
        {if $this->getAttribute('zeroProduct')}
        <div class="quiqqer-products-controls-product-productPicker__sheet quiqqer-productPicker-sheet">
            <div class="quiqqer-productPicker-sheet__inner">
                <div data-name="zero-product-image" class="quiqqer-productPicker-sheet-product__image"></div>
                <div data-name="zero-product-title" class="quiqqer-productPicker-sheet__title"></div>
                <div data-name="zero-product-description" class="quiqqer-productPicker-sheet__content text-muted"></div>
                <div data-name="zero-product-content" class="quiqqer-productPicker-sheet-product__content text-muted"></div>
                <div data-name="zero-product-price" class="quiqqer-productPicker-sheet-product__price text-muted"></div>
                <div class="quiqqer-productPicker-sheet-product__actions text-muted">
                    <button disabled class="btn btn-secondary w-full">
                        <span class="fa fa-basket-shopping"></span>
                        <span data-name="zero-button-text"></span>
                    </button>
                </div>
            </div>
        </div>
        {/if}

        {foreach $sheets as $sheet}
        <div class="quiqqer-products-controls-product-productPicker__sheet {if $sheet.highlighted}highlighted{/if} quiqqer-productPicker-sheet">
            <div class="quiqqer-productPicker-sheet__inner">
                <div class="quiqqer-productPicker-sheet__title">
                    {$sheet.title}
                </div>

                {if !empty($sheet.content)}
                <div class="quiqqer-productPicker-sheet__content text-muted">
                    {$sheet.content}
                </div>
                {/if}

                {foreach $sheet.options as $interval => $entry}
                    {assign var="Product" value=$entry.Product}
                    {assign var="Price" value=$entry.Price}
                    <article data-name="product-sheet-product"
                             data-product-id="{$Product->getId()}"
                             data-interval="{$interval}"
                             style="display: none;"
                             class="quiqqer-productPicker-sheet-product"
                    >
                        {if $showProductDetails}
                        <div class="quiqqer-productPicker-sheet-product__image">
                            {image image=$Product->getImage()}
                        </div>
                        {/if}

                        {if $showProductDetails}
                        <div class="quiqqer-productPicker-sheet-product__title">
                            {$Product->getTitle()}
                        </div>
                        {/if}

                        {if $showProductDetails && $Product->getContent()}
                        <div class="quiqqer-productPicker-sheet-product__content">
                            {$Product->getContent()}
                        </div>
                        {/if}

                        <div class="quiqqer-productPicker-sheet-product__price">
                            {$Price->getDisplayPrice()}
                        </div>

                        <div class="quiqqer-productPicker-sheet-product__actions">
                            <button data-name="product-sheet-product-select" class="btn btn-primary w-full">
                                <span class="fa fa-basket-shopping"></span>
                                <span>{locale group='quiqqer/products' var='frontend.productPicker.article.btn.text'}</span>
                            </button>
                        </div>
                    </article>
                {/foreach}

            </div>
        </div>
        {/foreach}
    </div>
</div>