{% extends "base.html" %}

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

{% block content %}
<h1>📜 Match History</h1>
{% include "components/nav.html" %}

<div style="margin-bottom: 20px;">
    <a href="/matches/new" class="btn btn-success">🎾 Record New Match</a>
</div>

{% if matches.is_empty() %}
    <div class="alert alert-info">
        No matches recorded yet. <a href="/matches/new">Record one</a>!
    </div>
{% else %}
    <table>
        <thead>
            <tr>
                <th>Type</th>
                <th>Team 1</th>
                <th>Score</th>
                <th>Team 2</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for match in matches %}
            <tr>
                <td>{{ match.match_type }}</td>
                <td>{{ match.team1_display }}</td>
                <td><strong>{{ match.team1_score }}-{{ match.team2_score }}</strong></td>
                <td>{{ match.team2_display }}</td>
                <td>{{ match.timestamp | truncate(length=16) }}</td>
                <td>
                    <a href="/matches/{{ match.id }}/delete" class="btn btn-danger" onclick="return confirm('Delete this match?')">Delete</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endif %}
{% endblock %}