{# ===== EN ÇOK OKUNAN HABERLER ===== #}
{% set mostReadNews = get_most_read_news(10) %}
{% if mostReadNews|length > 0 %}
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
    <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);" class="text-white px-4 py-2.5 flex items-center gap-2">
        <i class="fas fa-fire-alt text-sm"></i>
        <h3 class="font-bold text-sm">En Çok Okunan</h3>
    </div>
    <div class="p-4">
        <div class="space-y-3">
            {% for news in mostReadNews %}
                <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}"
                   class="flex items-start gap-3 group {% if not loop.last %}pb-3 border-b border-gray-100 dark:border-gray-800{% endif %}">
                    {# Rank number #}
                    <span class="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full text-xs font-bold
                        {% if loop.index <= 3 %}
                            text-white
                        {% else %}
                            bg-gray-100 dark:bg-gray-800 text-gray-500
                        {% endif %}"
                        {% if loop.index == 1 %}style="background: linear-gradient(135deg, #f59e0b, #d97706);"
                        {% elseif loop.index == 2 %}style="background: linear-gradient(135deg, #9ca3af, #6b7280);"
                        {% elseif loop.index == 3 %}style="background: linear-gradient(135deg, #d97706, #b45309);"
                        {% endif %}>
                        {{ loop.index }}
                    </span>
                    {# Content #}
                    <div class="flex-1 min-w-0">
                        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2 leading-snug group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                            {{ news.title }}
                        </h4>
                        <div class="flex items-center gap-2 mt-1 text-xs text-gray-400">
                            <span><i class="far fa-eye mr-0.5"></i> {{ news.viewCount }}</span>
                            {% if news.publishedAt %}
                                <span><i class="far fa-clock mr-0.5"></i> {{ news.publishedAt|date("d.m") }}</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
