<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" xmlns:ama="AmadeusAgentur\AmadeusNext\ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:for each="{cases}" as="case">
    <f:if condition="{case.doktype} == 119">
        <div class="relative group w-full max-w-3xl justify-self-center self-end bg-[--bg-case]" style="--bg-case:{case.casecolor}">

            <div class="absolute  top-0 w-full h-full flex items-end justify-start bg-gradient-to-tr from-transparent group-hover:from-[#00000099] to-50% z-10">
                <div class="text-white p-6 md:p-16 opacity-0 group-hover:opacity-100 not-prose">
                    <div class="">{case.nav_title -> f:format.html(parseFuncTSPath: 'lib.parseFunc_RTE')}</div>
                    <div class="font-bold text-2xl">{case.title -> f:format.html(parseFuncTSPath: 'lib.parseFunc_RTE')}</div>
                </div>
            </div>

            {v:page.resources.fal(field: 'casethumb', record: case, asObjects: 'true') -> v:iterator.first() -> f:variable(name: 'caseThumb')}
            {v:page.resources.fal(field: 'casevideo', record: case, asObjects: 'true') -> v:iterator.first() -> f:variable(name: 'caseVideo')}

            <f:if condition="{caseThumb || caseVideo}">
                <f:then>
                    {f:or(content: caseVideo, alternative: caseThumb) -> f:variable(name: 'test')}
                    <f:render partial="Media/Case" arguments="{data:case, fileDesktop:test, fileMobile:test, croppedHeight:'false', caption:'true'}"/>
                </f:then>
                <f:else>
                    <picture>
                        <img class="w-full h-auto" src="https://placehold.co/1200x1200/{case.casecolor -> v:format.replace(substring: '#', replacement: '')}/ffffff?text={case.nav_title -> f:format.urlencode()}\nTeaserthumb+fehlt!"/>
                    </picture>
                </f:else>
            </f:if>

            <f:link.page pageUid="{case.uid}" target="{data.target}" class="absolute w-full h-full top-0 z-10"></f:link.page>

        </div>
    </f:if>
</f:for>