{assign var=Placeholder value=$Project->getMedia()->getPlaceholderImage()}

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

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

<section itemscope itemtype="{$this->getAttribute('itemtype')|escape:'html'}"
         class="qui-control-stickyContent control-template"
>
    <div class="qui-control-stickyContent-vNav-container">
        <ul class="qui-control-stickyContent-vNav">
            {assign var=navCounter value=0}
            {foreach from=$children item=Child}
            <li>
                <span data-qui-section="{$navCounter}" class="circle-icon control-color"></span>
            </li>
            {assign var=navCounter value=$navCounter+1}
            {/foreach}
        </ul>
    </div>

    <!-- image container -->
    <div class="stickyContent-left-mobileWrapper">
        <div class="qui-control-stickyContent-left grid-50">
            <div class="qui-control-stickyContent-left-wrapper">
                <div class="qui-control-stickyContent-left-wrapper-container">
                    {foreach from=$children item=Child}

                    {assign var=_Child value=$Child->load()}
                    <!-- entry image -->
                    {image src=$Child->getAttribute('image_site') width="500" type="resize"
                    class="qui-control-stickyContent-image"}
                    {/foreach}
                </div>
            </div>

            <!-- mockup image -->
            <img src="{$imageMockupUrl}" class="image-mockup"/>
        </div>
    </div>

    <!-- content container -->
    <div class="qui-control-stickyContent-right grid-50">
        {assign var=counter value=1}
        {foreach from=$children item=Child}

        <article itemscope
                 itemprop="itemListElement"
                 itemtype="{$this->getAttribute('child-itemtype')|escape:'html'}"
                 class="qui-control-stickyContent-right-entry"
        >
            <meta itemprop="position" content="{$counter}"/>
            {assign var=counter value=$counter+1}

            <!-- entry content -->
            <div class="qui-control-stickyContent-right-entry-content">

                <header>
                    <h1 itemprop="name">
                        {$Child->getAttribute('title')}
                    </h1>
                </header>

                <p>
                    {$Child->getAttribute('short')|nl2br}
                </p>

                <a itemprop="url" href="{url site=$Child}" class="button">
                    {locale group="quiqqer/sitetypes" value="list.more"}
                </a>

            </div>

        </article>

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