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

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

<div class="control-template">
    <div class="quiqqer-bricks-pdfPreview"
         data-name="pdf-preview-container"
         data-qui-options-pdffile="{$pdfFile}"
         data-qui-options-pagenum="{$sheetsNumber}"
         data-qui="package/quiqqer/bricks/bin/Controls/PDF/PdfPreview"
         {if $aspectRatio}style="--_aspectRatio: var(--aspectRatio, {$aspectRatio});"{/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 class="btn btn-icon btn-rounded btn--prev" data-name="prev">
                <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
            </button>
            <button class="btn btn-icon btn-rounded btn--next" data-name="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}
            <div class="sheet" data-name="sheet">
                <div data-name="loader" class="skeleton-loader" style="width: 100%; height: 100%;"></div>
            </div>
            {/section}
        </div>
        </div>
    </div>
</div>