{% extends "base.html" %}

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

{% block content %}
<div class="max-w-2xl mx-auto">
    <h1 class="pitt-primary text-4xl font-bold mb-8 text-center">✅ Record a Match</h1>
    
    {% include "components/nav.html" %}
    
    <form method="post" action="/matches/new" class="card">
        <div class="mb-6">
            <label class="block font-bold pitt-primary mb-2">Match Type</label>
            <select name="match_type" class="form-input" required>
                <option value="">-- Select Match Type --</option>
                <option value="singles">Singles</option>
                <option value="doubles">Doubles</option>
            </select>
        </div>
        
        <div class="bg-blue-50 p-6 rounded-lg mb-6">
            <h2 class="font-bold pitt-primary mb-4">Team 1</h2>
            <div class="mb-4">
                <label class="block font-bold pitt-primary mb-2">Player 1</label>
                <select name="team1_player1" class="form-input" required>
                    <option value="">-- Select Player --</option>
                    {% for player in players %}
                        <option value="{{ player.id }}">{{ player.name }} ({{ player.rating_display }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-4">
                <label class="block font-bold pitt-primary mb-2">Player 2 (Doubles Only)</label>
                <select name="team1_player2" class="form-input">
                    <option value="">-- Select Player (Optional) --</option>
                    {% for player in players %}
                        <option value="{{ player.id }}">{{ player.name }} ({{ player.rating_display }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-4">
                <label class="block font-bold pitt-primary mb-2">Score</label>
                <input type="number" name="team1_score" class="form-input" min="0" max="21" required placeholder="e.g., 11">
            </div>
        </div>
        
        <div class="bg-red-50 p-6 rounded-lg mb-6">
            <h2 class="font-bold pitt-primary mb-4">Team 2</h2>
            <div class="mb-4">
                <label class="block font-bold pitt-primary mb-2">Player 1</label>
                <select name="team2_player1" class="form-input" required>
                    <option value="">-- Select Player --</option>
                    {% for player in players %}
                        <option value="{{ player.id }}">{{ player.name }} ({{ player.rating_display }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-4">
                <label class="block font-bold pitt-primary mb-2">Player 2 (Doubles Only)</label>
                <select name="team2_player2" class="form-input">
                    <option value="">-- Select Player (Optional) --</option>
                    {% for player in players %}
                        <option value="{{ player.id }}">{{ player.name }} ({{ player.rating_display }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-4">
                <label class="block font-bold pitt-primary mb-2">Score</label>
                <input type="number" name="team2_score" class="form-input" min="0" max="21" required placeholder="e.g., 9">
            </div>
        </div>
        
        <div class="flex gap-4">
            <button type="submit" class="btn-success flex-1">✅ Record Match</button>
            <a href="/matches" class="btn-primary flex-1 text-center">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}