{* arrow buttons defined once, placed either as overlay (over slides) or inline (in the nav row) *}
{capture name=arrows}
    <button type="button"
            class="quiqqer-slider-controls-carousel__arrow quiqqer-slider-controls-carousel__arrow--prev"
            data-name="prev"
            aria-label="{locale group="quiqqer/slider" var="control.carousel.prev"}">
        <span class="fa fa-angle-left" aria-hidden="true"></span>
    </button>
    <button type="button"
            class="quiqqer-slider-controls-carousel__arrow quiqqer-slider-controls-carousel__arrow--next{if $showRing} quiqqer-slider-controls-carousel__arrow--hasRing{/if}"
            data-name="next"
            aria-label="{locale group="quiqqer/slider" var="control.carousel.next"}">
        {if $showRing}
            <span class="quiqqer-slider-controls-carousel__ring" data-name="ring" aria-hidden="true"></span>
        {/if}
        <span class="fa fa-angle-right" aria-hidden="true"></span>
    </button>
{/capture}

<div class="quiqqer-slider-controls-carousel__stage{if $arrows && $arrowsPosition === 'overlay'} has-overlayArrows{/if}">
    <div class="quiqqer-slider-controls-carousel__viewport{if $axis === 'y'} is-vertical{/if}" data-name="viewport">
        <{$containerTag} class="quiqqer-slider-controls-carousel__container" data-name="container">
            {foreach from=$slides item=$slide}
                <{$slideTag} class="quiqqer-slider-controls-carousel__slide" data-name="slide">
                    {$slide}
                </{$slideTag}>
            {/foreach}
        </{$containerTag}>
    </div>

    {if $arrows && $arrowsPosition === 'overlay'}
        <div class="quiqqer-slider-controls-carousel__arrows quiqqer-slider-controls-carousel__arrows--overlay" data-name="arrows">
            {$smarty.capture.arrows nofilter}
        </div>
    {/if}

    {if $showTimeBar}
        <div class="quiqqer-slider-controls-carousel__timebar" data-name="timebar" aria-hidden="true">
            <div class="quiqqer-slider-controls-carousel__timebarFill" data-name="timebarFill"></div>
        </div>
    {/if}
</div>

{if ($arrows && $arrowsPosition === 'inline') || $pagination !== 'none'}
    <div class="quiqqer-slider-controls-carousel__nav quiqqer-slider-controls-carousel__nav--{$navAlign}{if $arrowsSide === 'right'} quiqqer-slider-controls-carousel__nav--arrowsRight{/if}" data-name="nav">
        {if $arrows && $arrowsPosition === 'inline'}
            <div class="quiqqer-slider-controls-carousel__arrows quiqqer-slider-controls-carousel__arrows--inline" data-name="arrows">
                {$smarty.capture.arrows nofilter}
            </div>
        {/if}

        {if $pagination !== 'none'}
            <div class="quiqqer-slider-controls-carousel__pagination quiqqer-slider-controls-carousel__pagination--{$pagination}"
                 data-name="pagination">
                {if $pagination === 'dots' || $pagination === 'dotsWindowed' || $pagination === 'dotsExpanded'}
                    <div class="quiqqer-slider-controls-carousel__dots{if $pagination === 'dotsWindowed'} is-windowed{/if}"
                         data-name="dots"
                         role="tablist"
                         aria-label="{locale group="quiqqer/slider" var="control.carousel.dots"}"></div>
                {elseif $pagination === 'progress'}
                    <div class="quiqqer-slider-controls-carousel__progress"
                         data-name="progress"
                         role="progressbar"
                         aria-label="{locale group="quiqqer/slider" var="control.carousel.progress"}">
                        <div class="quiqqer-slider-controls-carousel__progressBar" data-name="progressBar"></div>
                    </div>
                {elseif $pagination === 'count'}
                    <div class="quiqqer-slider-controls-carousel__count"
                         data-name="count"
                         aria-label="{locale group="quiqqer/slider" var="control.carousel.count"}">
                        <span class="quiqqer-slider-controls-carousel__countCurrent" data-name="count-current">1</span>
                        <span class="quiqqer-slider-controls-carousel__countSeparator">/</span>
                        <span class="quiqqer-slider-controls-carousel__countTotal" data-name="count-total">1</span>
                    </div>
                {/if}
            </div>
        {/if}
    </div>
{/if}