{assign var=logo value=$Child->getAttribute('quiqqer.portfolio.settings.logo')}
{assign var=logoIcon value=$Child->getAttribute('quiqqer.portfolio.settings.logoIcon')}
{assign var=logoFallback value=substr($Child->getAttribute('title'), 0, 1)}

<div class="quiqqer-portfolio-list2022-entry-inner quiqqer-portfolio-flipCardCompact" tabindex="0">
    <figure class="quiqqer-portfolio-flipCardCompact__figure">
        <div class="quiqqer-portfolio-flipCardCompact__card">
            <div class="quiqqer-portfolio-flipCardCompact__cardInner">
                <div class="quiqqer-portfolio-flipCardCompact__side quiqqer-portfolio-flipCardCompact__side--front">
                    <div class="quiqqer-portfolio-list2022-entry-imageContainer">
                        {if strpos($Child->getAttribute('image_site'), 'fa ') === 0}
                            {image src=$Child->getAttribute('image_site')}
                        {else}
                            <noscript>
                                {image src=$Child->getAttribute('image_site') height="400" style="$imgPositionStyle"}
                            </noscript>
                        {/if}
                    </div>
                </div>

                <div class="quiqqer-portfolio-flipCardCompact__side quiqqer-portfolio-flipCardCompact__side--back">
                    <div class="quiqqer-portfolio-flipCardCompact__backContent">
                        <div class="quiqqer-portfolio-list2022-entry-title fw-heading lh-heading color-heading">
                            {$Child->getAttribute('title')}
                        </div>

                        {if $Child->getAttribute('short')}
                        <div class="quiqqer-portfolio-list2022-entry-desc">
                            {$Child->getAttribute('short')}
                        </div>
                        {/if}

                        <div class="quiqqer-portfolio-flipCardCompact__buttonWrap">
                            {if $Child->getAttribute('quiqqer.portfolio2022.target.isClickable')}
                                <a href="{$Child->getAttribute('quiqqer.portfolio2022.target.href')}"
                                   class="btn btn-primary quiqqer-portfolio-flipCardCompact__button"
                                   data-name="primary-link"
                                   {if $Child->getAttribute('quiqqer.portfolio2022.target.target')}target="{$Child->getAttribute('quiqqer.portfolio2022.target.target')}"{/if}
                                   {if $Child->getAttribute('quiqqer.portfolio2022.target.rel')}rel="{$Child->getAttribute('quiqqer.portfolio2022.target.rel')}"{/if}>
                                    {if $buttonText && !$Child->getAttribute('quiqqer.portfolio2022.target.isExternal')}
                                        {$buttonText}
                                    {else}
                                        {locale group="quiqqer/portfolio" var=$Child->getAttribute('quiqqer.portfolio2022.target.ctaLocale')}
                                    {/if}
                                </a>
                            {else}
                                <span class="quiqqer-portfolio-flipCardCompact__button quiqqer-portfolio-flipCardCompact__button--disabled">
                                    {if $buttonText && !$Child->getAttribute('quiqqer.portfolio2022.target.isExternal')}
                                        {$buttonText}
                                    {else}
                                        {locale group="quiqqer/portfolio" var=$Child->getAttribute('quiqqer.portfolio2022.target.ctaLocale')}
                                    {/if}
                                </span>
                            {/if}
                        </div>
                    </div>
                </div>

                <div class="quiqqer-portfolio-flipCardCompact__logo">
                    {if $logoIcon}
                        {image src=$logoIcon
                            class="quiqqer-portfolio-flipCardCompact__logoImage"}
                    {elseif $logo}
                        {image src=$logo
                            class="quiqqer-portfolio-flipCardCompact__logoImage"}
                    {else}
                        <span class="quiqqer-portfolio-flipCardCompact__logoFallback">
                            {if $logoFallback}{$logoFallback|upper}{else}?{/if}
                        </span>
                    {/if}
                </div>
            </div>

            {if $Child->getAttribute('quiqqer.portfolio2022.target.isClickable')}
                <a href="{$Child->getAttribute('quiqqer.portfolio2022.target.href')}"
                   class="quiqqer-portfolio-flipCardCompact__cardLink"
                   tabindex="-1" aria-hidden="true"
                   {if $Child->getAttribute('quiqqer.portfolio2022.target.target')}target="{$Child->getAttribute('quiqqer.portfolio2022.target.target')}"{/if}
                   {if $Child->getAttribute('quiqqer.portfolio2022.target.rel')}rel="{$Child->getAttribute('quiqqer.portfolio2022.target.rel')}"{/if}></a>
            {/if}
        </div>
    </figure>

    <div class="skeletonLoadingEffect"></div>
    <noscript>
        <style>
            [data-id="{$Child->getId()}"] {
                display: inline;
            }
        </style>
    </noscript>
</div>