{% extends "base.html" %}

{% block title %}Match History - Pickleball ELO Tracker{% endblock %}

{% block content %}
<h1 class="pitt-primary text-4xl font-bold mb-8 text-center">🎯 Match History</h1>

{% include "components/nav.html" %}

{% if matches.is_empty() %}
    <div class="alert-info">
        No matches recorded yet. <a href="/matches/new" class="font-bold hover:underline">Record the first match</a>!
    </div>
{% else %}
    <div class="max-w-6xl mx-auto card">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-blue-900 text-white">
                    <tr>
                        <th class="px-4 py-3 text-left">Type</th>
                        <th class="px-4 py-3 text-left">Team 1</th>
                        <th class="px-4 py-3 text-center">Score</th>
                        <th class="px-4 py-3 text-left">Team 2</th>
                        <th class="px-4 py-3 text-left">Date</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for match in matches %}
                    <tr class="border-b hover:bg-gray-50">
                        <td class="px-4 py-3 capitalize font-semibold">{{ match.match_type }}</td>
                        <td class="px-4 py-3">
                            {% for player in match.team1_players %}
                                <div class="pitt-primary font-semibold">
                                    <a href="/players/{{ player.id }}" class="hover:underline">{{ player.name }}</a>
                                    <span class="{% if player.rating_change >= 0.0 %}text-green-600{% else %}text-red-600{% endif %} font-bold">
                                        {% if player.rating_change >= 0.0 %}+{% endif %}{{ player.rating_change_display }}
                                    </span>
                                </div>
                            {% endfor %}
                        </td>
                        <td class="px-4 py-3 text-center font-bold text-lg">{{ match.team1_score }}-{{ match.team2_score }}</td>
                        <td class="px-4 py-3">
                            {% for player in match.team2_players %}
                                <div class="pitt-primary font-semibold">
                                    <a href="/players/{{ player.id }}" class="hover:underline">{{ player.name }}</a>
                                    <span class="{% if player.rating_change >= 0.0 %}text-green-600{% else %}text-red-600{% endif %} font-bold">
                                        {% if player.rating_change >= 0.0 %}+{% endif %}{{ player.rating_change_display }}
                                    </span>
                                </div>
                            {% endfor %}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ match.match_date }}</td>
                        <td class="px-4 py-3">
                            <form method="post" action="/matches/{{ match.id }}/delete" style="display: inline;">
                                <button type="submit" class="btn-danger text-sm" onclick="return confirm('Delete this match?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endif %}
{% endblock %}