{% extends "base.html" %}

{% block title %}赛后报告 - YRTV{% endblock %}

{% block content %}
<div class="space-y-6 px-4 sm:px-0">
    <div>
        <p class="text-xs font-bold uppercase tracking-widest text-yrtv-600">{{ brand.primary }} · Post Match</p>
        <h1 class="mt-1 text-3xl font-black text-gray-900 dark:text-white">赛后报告中心</h1>
        <p class="mt-2 text-sm text-gray-500">表现变化只与该队员比赛发生前的最近 20 场比较。</p>
    </div>

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
        {% for report in reports %}
        <a href="{{ url_for('matches.detail', match_id=report.match_id) }}" class="rounded-2xl border border-gray-100 bg-white p-5 shadow transition hover:border-yrtv-300 hover:shadow-lg dark:border-slate-700 dark:bg-slate-800">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <div class="flex items-center gap-2">
                        <span class="rounded px-2 py-1 text-xs font-black {% if report.is_win %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-600{% endif %}">{{ 'WIN' if report.is_win else 'LOSS' }}</span>
                        <span class="font-black text-gray-900 dark:text-white">{{ report.map_name }}</span>
                    </div>
                    <p class="mt-3 text-sm text-gray-600 dark:text-gray-300">{{ report.summary_text }}</p>
                    <div class="mt-3 text-xs text-gray-400">{{ report.roster_count }} 名 roster 队员 · {{ report.record_break_count }} 项纪录刷新</div>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-black text-yrtv-600">{{ '%.2f'|format(report.team_avg_rating) }}</div>
                    <div class="text-[10px] uppercase text-gray-400">Team Rating</div>
                    <div class="mt-2 text-xs text-gray-500">MVP {{ report.mvp.username or report.mvp_steam_id }}</div>
                </div>
            </div>
        </a>
        {% else %}
        <div class="col-span-full rounded-2xl bg-white py-16 text-center text-gray-400 dark:bg-slate-800">暂无赛后报告</div>
        {% endfor %}
    </div>
</div>
{% endblock %}