{% extends 'frontend/base.html.twig' %}

{% block title %}Yazarlar | Haber{% endblock %}
{% block meta_description %}Yazarlarimizin kalemleri ile gundemin nabzini tutun. Tum yazarlarimizi ve koselerini inceleyin.{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    {# Page Header #}
    <div class="mb-8">
        <div class="flex items-center gap-3 mb-2">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
                <i class="fas fa-pen-nib mr-2 text-red-600"></i>Yazarlar
            </h1>
        </div>
        <p class="text-gray-600 dark:text-gray-400">Yazarlarimizin kalemleri ile gundemin nabzini tutun.</p>
        <div class="h-1 w-20 bg-red-600 rounded mt-3"></div>
    </div>

    {# Authors Grid #}
    {% if authors|length > 0 %}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for author in authors %}
                <article class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-start gap-4">
                            {# 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-20 h-20 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700 group-hover:border-red-500 transition-colors">
                                {% else %}
                                    <div class="w-20 h-20 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-2 border-gray-200 dark:border-gray-700 group-hover:border-red-500 transition-colors">
                                        <i class="fas fa-user text-2xl text-gray-400 dark:text-gray-500"></i>
                                    </div>
                                {% endif %}
                            </a>

                            {# Author Info #}
                            <div class="flex-1 min-w-0">
                                <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                    <a href="{{ path('frontend_author_detail', {slug: author.slug}) }}">
                                        {{ author.name }}
                                    </a>
                                </h2>

                                {% if authorArticleCounts[author.id] is defined and authorArticleCounts[author.id] > 0 %}
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        <i class="far fa-newspaper mr-1"></i> {{ authorArticleCounts[author.id] }} yazi
                                    </p>
                                {% endif %}

                                {# Social Links #}
                                <div class="flex gap-2 mt-2">
                                    {% if author.socialTwitter %}
                                        <a href="{{ author.socialTwitter }}" target="_blank" class="text-gray-400 hover:text-sky-500 transition-colors" aria-label="Twitter">
                                            <i class="fab fa-twitter text-sm"></i>
                                        </a>
                                    {% endif %}
                                    {% if author.socialFacebook %}
                                        <a href="{{ author.socialFacebook }}" target="_blank" class="text-gray-400 hover:text-blue-600 transition-colors" aria-label="Facebook">
                                            <i class="fab fa-facebook-f text-sm"></i>
                                        </a>
                                    {% endif %}
                                    {% if author.socialInstagram %}
                                        <a href="{{ author.socialInstagram }}" target="_blank" class="text-gray-400 hover:text-pink-600 transition-colors" aria-label="Instagram">
                                            <i class="fab fa-instagram text-sm"></i>
                                        </a>
                                    {% endif %}
                                    {% if author.socialLinkedin %}
                                        <a href="{{ author.socialLinkedin }}" target="_blank" class="text-gray-400 hover:text-blue-700 transition-colors" aria-label="LinkedIn">
                                            <i class="fab fa-linkedin-in text-sm"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        {# Latest Article #}
                        {% if authorLatestArticles[author.id] is defined %}
                            {% set article = authorLatestArticles[author.id] %}
                            <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
                                <p class="text-xs text-gray-500 dark:text-gray-500 mb-1 uppercase tracking-wider font-medium">Son Yazi</p>
                                <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 leading-snug line-clamp-2 hover:text-red-600 dark:hover:text-red-400 transition-colors">
                                    <a href="{{ path('frontend_news_detail', {slug: article.slug}) }}">
                                        {{ article.title }}
                                    </a>
                                </h3>
                            </div>
                        {% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-16">
            <i class="fas fa-pen-nib text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
            <p class="text-gray-500 dark:text-gray-400">Henuz yazar eklenmemis.</p>
        </div>
    {% endif %}

</div>
{% endblock %}
