{namespace drk=Drk\Template\ViewHelpers}
<div xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
     f:schemaLocation="https://fluidtypo3.org/schemas/fluid-master.xsd"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     v:schemaLocation="https://fluidtypo3.org/schemas/vhs-master.xsd"
     xmlns:drk="http://typo3.org/ns/Drk/Template/ViewHelpers"
     data-namespace-typo3-fluid="true">

    <f:layout name="Content"/>

    <f:section name="Main">
        <section class="o-section">
            <div class="c-stage-teaser o-stage">
                <figure class="o-stage__img-wrap">
                    <f:if condition="{files}">
                        <f:then>
                            <f:variable name="imageSize">{drk:imageData(imgPath: '{f:uri.image(image: files.0, width: 1920)}')}</f:variable>
                            <f:if condition="{files.0.properties.link}">
                                <a href="<f:uri.typolink parameter="{files.0.properties.link}" />" title="{files.0.title}">
                            </f:if>

                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                 data-src="{f:uri.image(image: '{files.0}', maxWidth: 1920, width: 1920)}"
                                 data-srcset="{f:uri.image(image: '{files.0}', maxWidth: 1920, width: 1920)} 1920w, {f:uri.image(image: '{files.0}', maxWidth: 1199, width: 1100)} 1000w,{f:uri.image(image: '{files.0}', maxWidth: 1099, width: 800)} 780w,{f:uri.image(image: '{files.0}', maxWidth: 799, width: 500)} 480w,{f:uri.image(image: '{files.0}', maxWidth: 479, width: 390)} 390w"
                                 alt="{files.0.alternative}"
                                 title="{files.0.title}"
                                 class="lazyload"
                                 {imageSize -> f:format.raw()}
                            />
                            <noscript>
                                <img src="{f:uri.image(image: '{files.0}', maxWidth: 1920, width: 1920)}"
                                     alt="{files.0.alternative}"
                                     title="{files.0.title}"
                                     {imageSize -> f:format.raw()}
                                />
                            </noscript>
                            <f:if condition="{files.0.properties.link}">
                                </a>
                            </f:if>
                            <f:render partial="Content/Copyright" section="Copyright" arguments="{media: files.0}"/>
                        </f:then>
                        <f:else>
                            <img src="http://placehold.it/1920x640?text=1920+x+640+Kein+Bühnenbild+hinterlegt"
                                 alt="Bühnebild Platzhalter"
                                 title="Bühnebild Platzhalter"/>
                        </f:else>
                    </f:if>
                </figure>
                    <div class="c-stage-teaser__wrapper alt-header">
                        <div class="o-section__wrapper">
                            <div class="c-stage-teaser__content">
                                <div class="c-stage-teaser__text">
                                    <f:if condition="{data.header}">
                                        <h3 class="c-stage-teaser__headline">
                                            {data.header}
                                        </h3>
                                    </f:if>

                                    <f:if condition="{data.rowDescription}">
                                        <p class="stage2">
                                            {data.rowDescription}
                                        </p>
                                    </f:if>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </section>
    </f:section>

</div>