<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">
    <div class="news-list">
        <f:if condition="{news}">
            <f:then>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <f:for each="{news}" as="newsItem">
                        <article class="news-card bg-white rounded-lg shadow-md overflow-hidden">

                            <f:if condition="{newsItem.firstPreview}">
                                <div class="news-image overflow-hidden">
                                    <f:image image="{newsItem.firstPreview}"
                                             maxWidth="400" maxHeight="250"
                                             class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105" />
                                </div>
                            </f:if>

                            <div class="p-6">
                                <f:if condition="{newsItem.firstCategory}">
                                    <span class="text-xs text-primary font-semibold uppercase tracking-wide">
                                        {newsItem.firstCategory.title}
                                    </span>
                                </f:if>

                                <h3 class="text-xl font-bold mt-2 mb-2 leading-snug">
                                    <n:link newsItem="{newsItem}" settings="{settings}" class="hover:text-primary transition-colors">
                                        {newsItem.title}
                                    </n:link>
                                </h3>

                                <time class="text-sm text-gray-500 block mb-3">
                                    <f:format.date format="d.m.Y">{newsItem.datetime}</f:format.date>
                                </time>

                                <f:if condition="{newsItem.teaser}">
                                    <p class="text-gray-600 text-sm mb-4 leading-relaxed">
                                        <f:format.crop maxCharacters="150" append="…">{newsItem.teaser}</f:format.crop>
                                    </p>
                                </f:if>

                                <n:link newsItem="{newsItem}" settings="{settings}"
                                        class="inline-flex items-center text-primary font-medium hover:underline text-sm">
                                    Devamını Oku →
                                </n:link>
                            </div>
                        </article>
                    </f:for>
                </div>

                <f:if condition="{pagination}">
                    <f:render partial="List/Pagination" arguments="{pagination: pagination, pages: pages, settings: settings}" />
                </f:if>
            </f:then>
            <f:else>
                <div class="text-center py-16">
                    <p class="text-gray-500 text-lg">Henüz haber bulunmuyor.</p>
                </div>
            </f:else>
        </f:if>
    </div>
</f:section>

</html>
