<f:layout name="General" />

<f:section name="content">
    <script>
        // Initialize Fancybox for elements with data-fancybox="gallery"
        document.addEventListener("DOMContentLoaded", function() {
            Fancybox.bind("[data-fancybox='gallery']", {});
        });
    </script>

    <!-- First image if present -->
    <f:if condition="{newsItem.media}">
        <div class="news-detail__main-image">
            <figure>
                <picture>
                    <source
                        type="image/webp"
                        srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320', fileExtension:'webp')} 320w,
                                {f:uri.image(image: newsItem.media.0.originalResource, width:'640', fileExtension:'webp')} 640w,
                                {f:uri.image(image: newsItem.media.0.originalResource, width:'1024', fileExtension:'webp')} 1024w"
                        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
                    />
                    <source
                        type="image/jpeg"
                        srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320')} 320w,
                                {f:uri.image(image: newsItem.media.0.originalResource, width:'640')} 640w,
                                {f:uri.image(image: newsItem.media.0.originalResource, width:'1024')} 1024w"
                        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
                    />
                    <img
                        src="{f:uri.image(image: newsItem.media.0.originalResource, width:'1024')}"
                        alt="{newsItem.media.0.originalResource.alternative}"
                        title="{newsItem.media.0.originalResource.title}"
                        loading="lazy"
                    />
                </picture>
            </figure>
        </div>
    </f:if>

    <!-- News title -->
    <h1 class="news-detail__title">{newsItem.title}</h1>
    <time class="news-detail__time" itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
        <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
    </time>


    <!-- Teaser text -->
    <f:if condition="{newsItem.teaser}">
        <div class="news-detail__teaser">
            {newsItem.teaser}
        </div>
    </f:if>

    <!-- Bodytext -->
    <div class="news-detail__bodytext">
        <f:format.html>
            {newsItem.bodytext}
        </f:format.html>
    </div>

    <!-- Content elements if present -->
    <f:if condition="{newsItem.contentElements}">
        <div class="news-detail__content-elements">
            <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
        </div>
    </f:if>

    <!-- Gallery if more than one picture -->
    <f:if condition="{f:count(subject: newsItem.media)} > 1">
        <div class="news-detail__gallery news-detail__gallery--grid">
            <f:for each="{newsItem.media}" as="mediaItem">
                <a href="{f:uri.image(image: mediaItem.originalResource)}"
                   data-fancybox="gallery"
                   data-caption="{mediaItem.originalResource.title}"
                   class="news-detail__gallery-link">
                    <figure class="news-detail__gallery-item">
                        <picture>
                            <source
                                type="image/webp"
                                srcset="{f:uri.image(image: mediaItem.originalResource, width:'320', fileExtension:'webp')} 320w,
                                        {f:uri.image(image: mediaItem.originalResource, width:'640', fileExtension:'webp')} 640w,
                                        {f:uri.image(image: mediaItem.originalResource, width:'1024', fileExtension:'webp')} 1024w"
                                sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
                            />
                            <source
                                type="image/jpeg"
                                srcset="{f:uri.image(image: mediaItem.originalResource, width:'320')} 320w,
                                        {f:uri.image(image: mediaItem.originalResource, width:'640')} 640w,
                                        {f:uri.image(image: mediaItem.originalResource, width:'1024')} 1024w"
                                sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
                            />
                            <img
                                src="{f:uri.image(image: mediaItem.originalResource, width:'1024')}"
                                alt="{mediaItem.originalResource.alternative}"
                                title="{mediaItem.originalResource.title}"
                                loading="lazy"
                            />
                        </picture>
                    </figure>
                </a>
            </f:for>
        </div>
    </f:if>
</f:section>
