<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:section name="main">
    <f:if condition="{newsItem}">
        <f:then>
            <article class="news-detail max-w-4xl mx-auto px-4 py-8">

                <header class="mb-8">
                    <f:if condition="{newsItem.firstCategory}">
                        <span class="inline-block text-xs text-primary font-semibold uppercase tracking-wide bg-primary/10 px-3 py-1 rounded-full mb-3">
                            {newsItem.firstCategory.title}
                        </span>
                    </f:if>

                    <h1 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
                        {newsItem.title}
                    </h1>

                    <div class="flex flex-wrap items-center text-gray-500 text-sm gap-4">
                        <time>
                            <f:format.date format="d F Y">{newsItem.datetime}</f:format.date>
                        </time>
                        <f:if condition="{newsItem.author}">
                            <span>| {newsItem.author}</span>
                        </f:if>
                    </div>
                </header>

                <f:if condition="{newsItem.firstPreview}">
                    <figure class="mb-8">
                        <f:image image="{newsItem.firstPreview}" maxWidth="1200"
                                 class="w-full rounded-lg shadow-md" />
                        <f:if condition="{newsItem.firstPreview.description}">
                            <figcaption class="text-sm text-gray-500 mt-2 text-center">
                                {newsItem.firstPreview.description}
                            </figcaption>
                        </f:if>
                    </figure>
                </f:if>

                <f:if condition="{newsItem.teaser}">
                    <p class="text-lg text-gray-600 font-medium mb-6 leading-relaxed border-l-4 border-primary pl-4">
                        {newsItem.teaser}
                    </p>
                </f:if>

                <div class="prose prose-lg max-w-none">
                    <f:format.html>{newsItem.bodytext}</f:format.html>
                </div>

                <f:if condition="{newsItem.tags}">
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <div class="flex flex-wrap gap-2">
                            <f:for each="{newsItem.tags}" as="tag">
                                <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200">
                                    #{tag.title}
                                </span>
                            </f:for>
                        </div>
                    </div>
                </f:if>

                <div class="mt-10">
                    <f:link.page pageUid="{settings.listPid}"
                                 class="inline-flex items-center text-primary font-medium hover:underline">
                        ← Tüm Haberlere Dön
                    </f:link.page>
                </div>

            </article>
        </f:then>
        <f:else>
            <div class="text-center py-16">
                <p class="text-gray-500">Haber bulunamadı.</p>
            </div>
        </f:else>
    </f:if>
</f:section>

</html>
