{% extends "base.html" %}

{% block content %}
    <h2>Admin: Edit Game {{ game.id }}</h2>
    <p>Matchup: {{ game.away_team if game.away_team else 'TBD' }} @ {{ game.home_team if game.home_team else 'TBD' }}</p>
    
    <form method="POST" style="max-width: 100%;">
        <div style="background: var(--bg-primary); padding: 2rem; border: 1px solid var(--deco-border); width: 100%; box-sizing: border-box;">
            <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px;">
                    <label for="scheduled_date">Scheduled Date (YYYY-MM-DD):</label>
                    <input type="text" id="scheduled_date" name="scheduled_date" value="{{ game.scheduled_date }}" style="width: 100%;">
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <label for="status">Status:</label>
                    <select id="status" name="status" style="width: 100%;">
                        <option value="Scheduled" {% if game.status == 'Scheduled' %}selected{% endif %}>Scheduled</option>
                        <option value="Final" {% if game.status == 'Final' %}selected{% endif %}>Final</option>
                        <option value="TBD" {% if game.status == 'TBD' %}selected{% endif %}>TBD</option>
                        <option value="Canceled" {% if game.status == 'Canceled' %}selected{% endif %}>Canceled</option>
                    </select>
                </div>
            </div>

            <div style="display: flex; gap: 2rem; margin-top: 1rem; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px;">
                    <label for="away_score">{{ game.away_team if game.away_team else 'Away' }} Score:</label>
                    <input type="number" id="away_score" name="away_score" value="{{ game.away_score if game.away_score is not none else '' }}" style="width: 100%;">
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <label for="home_score">{{ game.home_team if game.home_team else 'Home' }} Score:</label>
                    <input type="number" id="home_score" name="home_score" value="{{ game.home_score if game.home_score is not none else '' }}" style="width: 100%;">
                </div>
            </div>

            <div style="margin-top: 2rem; overflow-x: auto;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: bold;">Box Score (Optional):</label>
                <table style="width: 100%; border: 1px solid var(--deco-border); background: #fff; min-width: 600px;">
                    <tr style="background: #eee;">
                        <th>Team</th>
                        <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>Ex</th><th>R</th><th>H</th><th>E</th>
                    </tr>
                    <tr>
                        <td style="font-weight: bold; font-size: 0.8rem; padding: 5px;">{{ game.away_team if game.away_team else 'Away' }}</td>
                        {% set bs_a = game.box_score.away if game.box_score else [0,0,0,0,0,0,0,0,0,0,0,0,0] %}
                        {% for col in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "extra", "runs", "hits", "errors"] %}
                            <td style="padding: 2px;"><input type="number" name="away_inn_{{ col }}" value="{{ bs_a[loop.index0] }}" style="width: 35px; padding: 2px; text-align: center;"></td>
                        {% endfor %}
                    </tr>
                    <tr>
                        <td style="font-weight: bold; font-size: 0.8rem; padding: 5px;">{{ game.home_team if game.home_team else 'Home' }}</td>
                        {% set bs_h = game.box_score.home if game.box_score else [0,0,0,0,0,0,0,0,0,0,0,0,0] %}
                        {% for col in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "extra", "runs", "hits", "errors"] %}
                            <td style="padding: 2px;"><input type="number" name="home_inn_{{ col }}" value="{{ bs_h[loop.index0] }}" style="width: 35px; padding: 2px; text-align: center;"></td>
                        {% endfor %}
                    </tr>
                </table>
            </div>

            <div style="margin-top: 2rem; display: flex; gap: 1rem;">
                <button type="submit" style="padding: 10px 30px;">Update Game</button>
                <a href="{{ url_for('game', game_id=game.id) }}" style="display: inline-block; background: #ddd; color: #333; padding: 10px 20px; text-decoration: none; font-family: var(--sans-font); font-weight: bold; border: 1px solid #ccc;">Cancel</a>
            </div>
        </div>
    </form>
{% endblock %}