{% extends "base.html" %}
{% set active_page = "authors" %}

{% block title %}{{ author.name }} — IETF Draft Analyzer{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<div class="mb-6">
    <a href="/authors" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-300 transition group">
        <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Authors
    </a>
</div>

<!-- Author Header -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
    <div class="flex items-start gap-4">
        <div class="w-14 h-14 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center flex-shrink-0">
            <span class="text-xl font-bold text-slate-400">{{ author.name[0]|upper if author.name else '?' }}</span>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-white">{{ author.name }}</h1>
            {% if author.affiliation %}
            <p class="text-sm text-slate-400 mt-1">{{ author.affiliation }}</p>
            {% endif %}
            <div class="flex items-center gap-4 mt-3">
                <span class="text-xs text-slate-500">{{ author.drafts|length }} draft{{ 's' if author.drafts|length != 1 }}</span>
                <span class="text-xs text-slate-500">{{ author.coauthors|length }} co-author{{ 's' if author.coauthors|length != 1 }}</span>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left column: Drafts -->
    <div class="lg:col-span-2 space-y-6">
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
            <h2 class="text-sm font-semibold text-slate-300 mb-4 flex items-center gap-2">
                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Authored Drafts <span class="text-slate-600 font-normal">({{ author.drafts|length }})</span>
            </h2>
            <div class="space-y-3">
                {% for d in author.drafts %}
                <a href="/drafts/{{ d.name }}" class="block bg-slate-800/30 rounded-lg border border-slate-800/50 hover:border-slate-700 p-4 transition group">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h3 class="text-sm font-medium text-slate-200 group-hover:text-blue-400 transition truncate">{{ d.title }}</h3>
                            <div class="flex items-center gap-2 mt-1">
                                <span class="text-xs text-slate-500 font-mono">{{ d.name }}</span>
                                {% if d.date %}
                                <span class="text-xs text-slate-600">{{ d.date }}</span>
                                {% endif %}
                            </div>
                            {% if d.categories %}
                            <div class="flex flex-wrap gap-1 mt-2">
                                {% for cat in d.categories[:3] %}
                                <span class="px-2 py-0.5 rounded-full text-[10px] bg-slate-800/60 text-slate-400 border border-slate-700">{{ cat }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        {% if d.score is not none %}
                        <span class="flex-shrink-0 px-2 py-1 rounded text-sm font-bold
                            {% if d.score >= 3.5 %}text-green-400
                            {% elif d.score >= 2.5 %}text-amber-400
                            {% else %}text-red-400{% endif %}">
                            {{ d.score }}
                        </span>
                        {% endif %}
                    </div>
                </a>
                {% endfor %}
                {% if not author.drafts %}
                <p class="text-sm text-slate-500">No drafts found.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Right column: Co-authors -->
    <div class="space-y-6">
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
            <h2 class="text-sm font-semibold text-slate-300 mb-3 flex items-center gap-2">
                <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Co-Authors <span class="text-slate-600 font-normal">({{ author.coauthors|length }})</span>
            </h2>
            <ul class="space-y-2.5">
                {% for ca in author.coauthors %}
                <li class="flex items-start gap-2">
                    <div class="w-7 h-7 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <span class="text-xs font-semibold text-slate-400">{{ ca.name[0]|upper if ca.name else '?' }}</span>
                    </div>
                    <div class="min-w-0">
                        <a href="/authors/{{ ca.person_id }}" class="text-sm text-blue-400 hover:text-blue-300 transition">{{ ca.name }}</a>
                        {% if ca.affiliation %}
                        <div class="text-xs text-slate-500 truncate">{{ ca.affiliation }}</div>
                        {% endif %}
                        <div class="text-[10px] text-slate-600">{{ ca.shared_drafts }} shared draft{{ 's' if ca.shared_drafts != 1 }}</div>
                    </div>
                </li>
                {% endfor %}
                {% if not author.coauthors %}
                <p class="text-sm text-slate-500">No co-authors found.</p>
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}
