{if $layout === 'teaser'}
<div class="quiqqer-bricks-pdfPreview-teaser" data-name="pdf-teaser"
     data-pdf-position="{$pdfPosition|escape:'html'}">
    <div class="quiqqer-bricks-pdfPreview-teaser__text">
        {if $this->getAttribute('frontendTitle')}
            <h2 class="control-header" data-name="pdf-title">{$this->getAttribute('frontendTitle')|escape:'html'}</h2>
        {/if}

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

    {if $pdfFile}
    <div class="quiqqer-bricks-pdfPreview-teaser__media">
        <div class="quiqqer-bricks-pdfPreview quiqqer-bricks-pdfPreview--teaser"
             data-name="pdf-preview-container"
             data-qui="package/quiqqer/bricks/bin/Controls/PDF/PdfPreview"
             data-qui-options-layout="teaser"
             data-qui-options-pdffile="{$pdfFile|escape:'html'}"
             {if $aspectRatio}style="--_aspectRatio: var(--aspectRatio, {$aspectRatio|escape:'html'});"{/if}
        >
            <div class="quiqqer-bricks-pdfPreview__cover" data-name="cover" aria-hidden="true">
                <span data-name="loader" class="skeleton-loader"></span>
                <span class="quiqqer-bricks-pdfPreview__coverHint">
                    <i class="fa-solid fa-book-open" aria-hidden="true"></i>
                </span>
            </div>
            <div class="quiqqer-bricks-pdfPreview__actions" data-name="actions">
                {if $showDownload}
                <a href="{$pdfFile|escape:'html'}" download class="btn btn-secondary" data-name="pdf-download">
                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                    <span>{$downloadLabel|escape:'html'}</span>
                </a>
                {/if}
                <button type="button" class="btn btn-primary" data-name="open" disabled>
                    <i class="fa-solid fa-expand" aria-hidden="true"></i>
                    <span>{$openLabel|escape:'html'}</span>
                </button>
            </div>
            <p class="quiqqer-bricks-pdfPreview__status" data-name="status" role="status"></p>
        </div>
    </div>
    {/if}
</div>
{else}
{if $this->getAttribute('frontendTitle')}
    <h2 class="control-header" data-name="pdf-title">{$this->getAttribute('frontendTitle')|escape:'html'}</h2>
{/if}

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

<div class="control-template">
    <div class="quiqqer-bricks-pdfPreview quiqqer-bricks-pdfPreview--classic"
         data-name="pdf-preview-container"
         data-qui-options-layout="classic"
         data-qui-options-pdffile="{$pdfFile|escape:'html'}"
         data-qui-options-pagenum="{$sheetsNumber|escape:'html'}"
         data-qui-options-pageanimation="{$pageAnimation|escape:'html'}"
         data-qui="package/quiqqer/bricks/bin/Controls/PDF/PdfPreview"
         {if $aspectRatio}style="--_aspectRatio: var(--aspectRatio, {$aspectRatio|escape:'html'});"{/if}
    >
        <div class="container">
        <div class="preview" data-name="preview">
            <div data-name="loader" class="skeleton-loader" style="width: 100%; height: 100%; display: grid; place-items: center;">
                <div style="text-align: center; opacity: 0.25;">
                    <i class="fa-regular fa-file-pdf" aria-hidden="true" style="font-size: clamp(2rem, 10vw, 5rem); margin-bottom: 1rem;"></i>
                    <div>{locale group="quiqqer/bricks" var="pdfPreview.brick.frontend.loading.title"}</div>
                </div>
            </div>

            <button type="button" class="btn btn-icon btn-rounded btn--prev" data-name="prev" disabled
                    aria-label="{locale group='quiqqer/bricks' var='pdfPreview.previous'}">
                <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-icon btn-rounded btn--next" data-name="next" disabled
                    aria-label="{locale group='quiqqer/bricks' var='pdfPreview.next'}">
                <i class="fa-solid fa-angle-right" aria-hidden="true"></i>
            </button>
        </div>
        <div class="sheets" data-name="sheets">
            {section name=idx start=0 loop=$sheetsNumber}
            <button type="button" class="sheet" data-name="sheet" disabled
                    aria-label="{locale group='quiqqer/bricks' var='pdfPreview.brick.frontend.loading.title'}">
                <span data-name="loader" class="skeleton-loader" aria-hidden="true" style="width: 100%; height: 100%;"></span>
            </button>
            {/section}
        </div>
        <p class="quiqqer-bricks-pdfPreview__status" data-name="status" role="status"></p>
        </div>
        {if $pdfFile && ($showDownload || $openViewer)}
        <div class="quiqqer-bricks-pdfPreview__actions" data-name="actions">
            {if $showDownload}
            <a href="{$pdfFile|escape:'html'}" download
               class="btn {if $openViewer}btn-secondary{else}btn-primary{/if}" data-name="pdf-download">
                <i class="fa-solid fa-download" aria-hidden="true"></i>
                <span>{$downloadLabel|escape:'html'}</span>
            </a>
            {/if}
            {if $openViewer}
            <button type="button" class="btn btn-primary" data-name="open" disabled>
                <i class="fa-solid fa-expand" aria-hidden="true"></i>
                <span>{$openLabel|escape:'html'}</span>
            </button>
            {/if}
        </div>
        {/if}
    </div>
</div>
{/if}