{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}

<div class="quiqqer-presentationBricks-progressbar-control
            quiqqer-presentationBricks-progressbar-control--layout-{$barLayout}
            quiqqer-presentationBricks-progressbar-control--animate-{$animation}">

    <div class="quiqqer-presentationBricks-progressbar-control__container">
    <div class="quiqqer-presentationBricks-progressbar-control__layout">

        {if $additionalText}
        <div class="quiqqer-presentationBricks-progressbar-control__text">
            {$additionalText}
        </div>
        {/if}

        <div class="quiqqer-presentationBricks-progressbar-control__bars">
            {foreach from=$progressbarData item=bar}
            <div class="quiqqer-presentationBricks-progressbar-control__bar"
                 role="progressbar"
                 aria-valuemin="0"
                 aria-valuemax="100"
                 aria-valuenow="{$bar.percent}"
                 aria-label="{$bar.title|escape:'html'}"
                 style="--qpb-fill: {$bar.percent}%; --qpb-bar-index: {$bar.index};{if $bar.color} --qpb-bar-color: {$bar.color};{/if}">

                {if $barLayout !== 'overlay'}
                <div class="quiqqer-presentationBricks-progressbar-control__bar-label">
                    <span class="quiqqer-presentationBricks-progressbar-control__bar-title">{$bar.title}</span>
                    <span class="quiqqer-presentationBricks-progressbar-control__bar-percent">{$bar.percent}%</span>
                </div>
                <div class="quiqqer-presentationBricks-progressbar-control__bar-track">
                    <div class="quiqqer-presentationBricks-progressbar-control__bar-fill"></div>
                </div>
                {else}
                <div class="quiqqer-presentationBricks-progressbar-control__bar-track">
                    <div class="quiqqer-presentationBricks-progressbar-control__bar-fill"></div>
                    <div class="quiqqer-presentationBricks-progressbar-control__bar-label quiqqer-presentationBricks-progressbar-control__bar-label--base">
                        <span class="quiqqer-presentationBricks-progressbar-control__bar-title">{$bar.title}</span>
                        <span class="quiqqer-presentationBricks-progressbar-control__bar-percent">{$bar.percent}%</span>
                    </div>
                    <div class="quiqqer-presentationBricks-progressbar-control__bar-label quiqqer-presentationBricks-progressbar-control__bar-label--inverted" aria-hidden="true">
                        <span class="quiqqer-presentationBricks-progressbar-control__bar-title">{$bar.title}</span>
                        <span class="quiqqer-presentationBricks-progressbar-control__bar-percent">{$bar.percent}%</span>
                    </div>
                </div>
                {/if}
            </div>
            {/foreach}
        </div>

    </div>
    </div>
</div>