{assign var=logo value=$Site->getAttribute('quiqqer.portfolio.settings.logo')}
{assign var=logoIcon value=$Site->getAttribute('quiqqer.portfolio.settings.logoIcon')}

<article itemscope itemtype="https://schema.org/CreativeWork"
         class="quiqqer-portfolio-referenceLayout-caseStudy qui-content-grid"
         data-siteid="{$Site->getId()}"
         data-project="{$Site->getProject()->getName()}"
         data-lang="{$Site->getProject()->getLang()}"
         {if $inlineStyle}style="{$inlineStyle nofilter}"{/if}
>
    <header class="quiqqer-portfolio-referenceLayout-caseStudy-header{if $centerHeader} quiqqer-portfolio-referenceLayout-caseStudy-header__centered qui-content-narrow{/if}">
        <h1 itemprop="name" class="quiqqer-portfolio-referenceLayout-caseStudy-title">
            {$Site->getAttribute('title')}
        </h1>
        {if $tags}
            <ul class="quiqqer-portfolio-referenceLayout-badges">
                {foreach from=$tags item=tag}
                    <li class="chip">{$tag|escape}</li>
                {/foreach}
            </ul>
        {/if}

        {if $Site->getAttribute('short')}
            <div class="quiqqer-portfolio-referenceLayout-caseStudy-desc">
                {$Site->getAttribute('short')}
            </div>
        {/if}
    </header>

    {if $mainImage}
        <div class="quiqqer-portfolio-referenceLayout-caseStudy-mainImage qui-content-full">
            {if $showHeaderImageBlurBackground}
                <span class="quiqqer-portfolio-referenceLayout-caseStudy-mainImage-blur" aria-hidden="true">
                    {image src=$mainImage class="quiqqer-portfolio-referenceLayout-caseStudy-mainImage-blurImg" width="20"}
                </span>
            {/if}
            {image src=$mainImage class="quiqqer-portfolio-referenceLayout-caseStudy-mainImage-img" data-zoom="1"}
        </div>
    {/if}

    {* dataPosition "aboveContent": no split wrapper, box and content are
       direct children of the qui-content-grid with their own column widths *}
    {if !$dataAbove}<div class="quiqqer-portfolio-referenceLayout-caseStudy-split">{/if}
        <aside class="quiqqer-portfolio-referenceLayout-caseStudy-data{if $dataAbove} quiqqer-portfolio-referenceLayout-caseStudy-data__box {/if}">
            {if $dataAbove}
                <div class="quiqqer-portfolio-referenceLayout-caseStudy-about">
                    {if $showLogo && ($logo || ($logoIcon && $showIconWhenNoLogo))}
                        <div class="quiqqer-portfolio-referenceLayout-caseStudy-logo">
                            {if $logo}
                                {image src=$logo class="quiqqer-portfolio-referenceLayout-caseStudy-logo-image__logo"}
                            {else}
                                {image src=$logoIcon class="quiqqer-portfolio-referenceLayout-caseStudy-logo-image__logoIcon"}
                            {/if}
                        </div>
                    {/if}

                    {foreach from=$aboutFields item=field}
                        <h2 class="quiqqer-portfolio-referenceLayout-caseStudy-about-title">{$field.label|escape}</h2>
                        <div class="quiqqer-portfolio-referenceLayout-caseStudy-about-text">{$field.value nofilter}</div>
                    {/foreach}
                </div>

                {* stays open across the shared technologies/website blocks below,
                   closed by the matching {if $dataAbove} before </aside> *}
                <div class="quiqqer-portfolio-referenceLayout-caseStudy-facts">
                    {if $factFields}
                        <dl class="quiqqer-portfolio-referenceLayout-caseStudy-fields">
                            {foreach from=$factFields item=field}
                                <div class="quiqqer-portfolio-referenceLayout-caseStudy-field">
                                    <dt class="quiqqer-portfolio-referenceLayout-caseStudy-field-label">{$field.label|escape}</dt>
                                    <dd class="quiqqer-portfolio-referenceLayout-caseStudy-field-value">{$field.value|escape}</dd>
                                </div>
                            {/foreach}
                        </dl>
                    {/if}
            {else}
                {if $showLogo && ($logo || ($logoIcon && $showIconWhenNoLogo))}
                    <div class="quiqqer-portfolio-referenceLayout-caseStudy-logo">
                        {if $logo}
                            {image src=$logo class="quiqqer-portfolio-referenceLayout-caseStudy-logo-image__logo"}
                        {else}
                            {image src=$logoIcon class="quiqqer-portfolio-referenceLayout-caseStudy-logo-image__logoIcon"}
                        {/if}
                    </div>
                {/if}

                {if $fields}
                    <dl class="quiqqer-portfolio-referenceLayout-caseStudy-fields">
                        {foreach from=$fields item=field}
                            <div class="quiqqer-portfolio-referenceLayout-caseStudy-field">
                                <dt class="quiqqer-portfolio-referenceLayout-caseStudy-field-label">{$field.label|escape}</dt>
                                {if $field.type == 'editor'}
                                    <dd class="quiqqer-portfolio-referenceLayout-caseStudy-field-value quiqqer-portfolio-referenceLayout-caseStudy-field-value__editor">{$field.value nofilter}</dd>
                                {else}
                                    <dd class="quiqqer-portfolio-referenceLayout-caseStudy-field-value">{$field.value|escape}</dd>
                                {/if}
                            </div>
                        {/foreach}
                    </dl>
                {/if}
            {/if}

            {if $technologies}
                <div class="quiqqer-portfolio-referenceLayout-caseStudy-technologies">
                    <span class="quiqqer-portfolio-referenceLayout-caseStudy-technologies-label">
                        {locale group="quiqqer/portfolio" var="reference.data.technologies.title"}
                    </span>
                    <ul class="quiqqer-portfolio-referenceLayout-caseStudy-technologies-list">
                        {foreach from=$technologies item=tech}
                            <li class="quiqqer-portfolio-referenceLayout-caseStudy-technology" title="{$tech.title|escape}">
                                {if $tech.image}
                                    {image src=$tech.image alt=$tech.title class="quiqqer-portfolio-referenceLayout-caseStudy-technology-image"}
                                {elseif $tech.svg}
                                    <span class="quiqqer-portfolio-referenceLayout-caseStudy-technology-icon"
                                          {if $tech.color}style="fill: {$tech.color};"{/if}
                                    >{$tech.svg nofilter}</span>
                                {/if}
                            </li>
                        {/foreach}
                    </ul>
                </div>
            {/if}

            {if $website}
                <a href="{$website}"
                   class="btn btn-secondary quiqqer-portfolio-referenceLayout-caseStudy-website-button"
                   target="_blank"
                   rel="noopener"
                   title="{locale group='quiqqer/portfolio' var='quiqqer.portfolio.reference.visit.website.buttonTitle' name=$Site->getAttribute('title')}"
                >
                    {locale group='quiqqer/portfolio' var='quiqqer.portfolio.reference.visit.website.button'}
                </a>
            {/if}

            {if $dataAbove}
                </div>{* closes .quiqqer-portfolio-referenceLayout-caseStudy-facts *}
            {/if}
        </aside>

        <div class="quiqqer-portfolio-referenceLayout-caseStudy-content{if $dataAbove} qui-content-narrow{/if}" itemprop="description">
            {$Site->getAttribute('content')}
        </div>
    {if !$dataAbove}</div>{* closes .quiqqer-portfolio-referenceLayout-caseStudy-split *}{/if}

    {if $Gallery}
        <div class="quiqqer-portfolio-referenceLayout-caseStudy-gallery qui-content-full">
            <div class="grid-container">
                {$Gallery->create()}
            </div>
        </div>
    {/if}

    {if $testimonial}
        <h2 class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-heading qui-content-wide">{$testimonialHeading|escape}</h2>

        <figure class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial qui-content-narrow">
            <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-icon fa-solid fa-quote-left" aria-hidden="true"></span>

            <div class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-quote">
                {$testimonial.quote}
            </div>

            <figcaption class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-author">
                <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-author-info">
                    {if $testimonial.image}
                        {image src=$testimonial.image alt=$testimonial.name class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-image"}
                    {/if}
                    <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-meta">
                        {if $testimonial.name}
                            <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-name">{$testimonial.name|escape}</span>
                        {/if}
                        {if $testimonial.role}
                            <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-role">{$testimonial.role|escape}</span>
                        {/if}
                    </span>
                </span>

                <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-stars" aria-hidden="true">
                    {for $star=1 to 5}
                        <span class="quiqqer-portfolio-referenceLayout-caseStudy-testimonial-star fa-solid fa-star"></span>
                    {/for}
                </span>
            </figcaption>
        </figure>
    {/if}

    {if $showNav}
        <div class="quiqqer-portfolio-reference2022-container quiqqer-portfolio-reference2022-container__nav quiqqer-portfolio-reference2022-container__navbottom">
            {include file="`$navHtml`"}
        </div>
    {/if}
</article>