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

{% block title %}{{ author.name }} | Yazarlar | Haber{% endblock %}
{% block meta_description %}{{ author.bio|default(author.name ~ ' yazilari ve koseleri. Tum yazilarini okuyun.')|striptags|slice(0, 160) }}{% endblock %}

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

    {# Breadcrumb #}
    <nav class="text-sm text-gray-500 dark:text-gray-400 mb-6">
        <a href="{{ path('frontend_home') }}" class="hover:text-red-600 transition-colors">Ana Sayfa</a>
        <i class="fas fa-chevron-right mx-2 text-xs"></i>
        <a href="{{ path('frontend_authors') }}" class="hover:text-red-600 transition-colors">Yazarlar</a>
        <i class="fas fa-chevron-right mx-2 text-xs"></i>
        <span class="text-gray-700 dark:text-gray-300">{{ author.name }}</span>
    </nav>

    {# Author Header Card #}
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800 shadow-sm p-6 md:p-8 mb-8">
        <div class="flex flex-col md:flex-row items-center md:items-start gap-6">
            {# Photo #}
            {% if author.photo %}
                <img src="{{ author.photo }}" alt="{{ author.name }}"
                     class="w-28 h-28 rounded-full object-cover border-4 border-red-100 dark:border-red-900/30 shadow-md">
            {% else %}
                <div class="w-28 h-28 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-4 border-gray-100 dark:border-gray-800">
                    <i class="fas fa-user text-4xl text-gray-400 dark:text-gray-500"></i>
                </div>
            {% endif %}

            <div class="flex-1 text-center md:text-left">
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                    {{ author.name }}
                </h1>

                {% if author.bio %}
                    <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-4 max-w-2xl">
                        {{ author.bio }}
                    </p>
                {% endif %}

                {# Social Links #}
                <div class="flex gap-3 justify-center md:justify-start">
                    {% if author.socialTwitter %}
                        <a href="{{ author.socialTwitter }}" target="_blank"
                           class="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-sky-500 hover:text-white transition-all" aria-label="Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                    {% endif %}
                    {% if author.socialFacebook %}
                        <a href="{{ author.socialFacebook }}" target="_blank"
                           class="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-blue-600 hover:text-white transition-all" aria-label="Facebook">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    {% endif %}
                    {% if author.socialInstagram %}
                        <a href="{{ author.socialInstagram }}" target="_blank"
                           class="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-pink-600 hover:text-white transition-all" aria-label="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                    {% endif %}
                    {% if author.socialLinkedin %}
                        <a href="{{ author.socialLinkedin }}" target="_blank"
                           class="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-blue-700 hover:text-white transition-all" aria-label="LinkedIn">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    {% endif %}
                    {% if author.email %}
                        <a href="mailto:{{ author.email }}"
                           class="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-red-600 hover:text-white transition-all" aria-label="E-posta">
                            <i class="fas fa-envelope"></i>
                        </a>
                    {% endif %}
                </div>

                <p class="text-sm text-gray-500 mt-3">
                    <i class="far fa-newspaper mr-1"></i> {{ articles|length }} yazi
                </p>
            </div>
        </div>
    </div>

    {# Articles by this author #}
    <div class="flex items-center gap-3 mb-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
            <i class="fas fa-pen-fancy mr-2 text-red-600"></i>Yazilari
        </h2>
        <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
    </div>

    {% if articles|length > 0 %}
        <div class="space-y-4">
            {% for article in articles %}
                <article class="group flex gap-4 bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-800 transition-all duration-300">
                    {# Thumbnail #}
                    <a href="{{ path('frontend_news_detail', {slug: article.slug}) }}" class="flex-shrink-0 w-32 sm:w-48 relative overflow-hidden">
                        {% if article.featuredImage %}
                            <img src="{{ article.featuredImage }}" alt="{{ article.title }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 aspect-[4/3]"
                                 loading="lazy">
                        {% else %}
                            <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center aspect-[4/3]">
                                <i class="far fa-image text-2xl text-gray-400 dark:text-gray-600"></i>
                            </div>
                        {% endif %}
                    </a>
                    {# Content #}
                    <div class="flex-1 py-3 pr-4">
                        {% if article.category %}
                            <a href="{{ path('frontend_category', {slug: article.category.slug}) }}"
                               class="inline-block text-xs font-semibold uppercase tracking-wider mb-1 hover:underline"
                               style="color: {{ article.category.color|default('#dc2626') }}">
                                {{ article.category.title }}
                            </a>
                        {% endif %}
                        <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 leading-snug mb-1.5 line-clamp-2 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                            <a href="{{ path('frontend_news_detail', {slug: article.slug}) }}">
                                {{ article.title }}
                            </a>
                        </h3>
                        {% if article.spot %}
                            <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 hidden sm:block">
                                {{ article.spot|striptags|slice(0, 120) }}
                            </p>
                        {% endif %}
                        <div class="flex items-center gap-3 text-xs text-gray-500">
                            {% if article.publishedAt %}
                                <span><i class="far fa-clock mr-1"></i>{{ article.publishedAt|date("d.m.Y H:i") }}</span>
                            {% endif %}
                            <span><i class="far fa-eye mr-1"></i>{{ article.viewCount }}</span>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-16">
            <i class="far fa-newspaper text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
            <p class="text-gray-500 dark:text-gray-400">Bu yazarin henuz yazisi bulunmuyor.</p>
        </div>
    {% endif %}

</div>
{% endblock %}
