{# ===== YAZARLAR SIDEBAR WIDGET ===== #}
{% set sidebarAuthors = get_sidebar_authors(5) %}
{% set sidebarAuthorArticles = get_sidebar_author_articles() %}
{% if sidebarAuthors|length > 0 %}
{% set authorColors = ['#dc2626', '#2563eb', '#059669', '#d97706', '#7c3aed', '#db2777', '#0891b2', '#4f46e5'] %}
<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, #1e1b4b 0%, #312e81 100%);" class="text-white px-4 py-2.5 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <i class="fas fa-pen-nib text-sm"></i>
            <h3 class="font-bold text-sm">Köşe Yazarları</h3>
        </div>
        <a href="{{ path('frontend_authors') }}" class="text-xs text-indigo-300 hover:text-white transition-colors">
            Tümü <i class="fas fa-arrow-right ml-0.5 text-[10px]"></i>
        </a>
    </div>
    <div class="p-4 space-y-3">
        {% for author in sidebarAuthors %}
            {% set colorIdx = loop.index0 % authorColors|length %}
            <div class="flex items-center gap-3 group {% if not loop.last %}pb-3 border-b border-gray-100 dark:border-gray-800{% endif %}">
                {# Author photo #}
                <a href="{{ path('frontend_author_detail', {slug: author.slug}) }}" class="flex-shrink-0">
                    {% if author.photo %}
                        <img src="{{ author.photo }}" alt="{{ author.name }}"
                             class="w-10 h-10 rounded-full object-cover border-2 group-hover:scale-105 transition-transform"
                             style="border-color: {{ authorColors[colorIdx] }};">
                    {% else %}
                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold"
                             style="background: {{ authorColors[colorIdx] }};">
                            {{ author.name|slice(0,1)|upper }}
                        </div>
                    {% endif %}
                </a>
                {# Author info #}
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-gray-900 dark:text-gray-100 group-hover:text-red-600 transition-colors">
                        <a href="{{ path('frontend_author_detail', {slug: author.slug}) }}">{{ author.name }}</a>
                    </h4>
                    {% if sidebarAuthorArticles is defined and sidebarAuthorArticles[author.id] is defined %}
                        <a href="{{ path('frontend_news_detail', {slug: sidebarAuthorArticles[author.id].slug}) }}"
                           class="text-xs text-gray-500 dark:text-gray-400 line-clamp-1 hover:text-red-600 transition-colors block mt-0.5">
                            {{ sidebarAuthorArticles[author.id].title }}
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endif %}
