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

    <div class="quiqqer-portfolio-referenceLayout-caseStudy-split">
        <aside class="quiqqer-portfolio-referenceLayout-caseStudy-data">
            {if $showLogo && ($logo || $logoIcon)}
                <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>
                            <dd class="quiqqer-portfolio-referenceLayout-caseStudy-field-value">{$field.value|escape}</dd>
                        </div>
                    {/foreach}
                </dl>
            {/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}
        </aside>

        <div class="quiqqer-portfolio-referenceLayout-caseStudy-content" itemprop="description">
            {$Site->getAttribute('content')}
        </div>
    </div>

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