team-tryouts/app/templates/pages/team_match_form.html

{% extends "layouts/base.html" %}
{% block title %}{% if match %}Edit{% else %}Schedule{% endif %} Team Match - TryoutPro{% endblock %}
{% block page_title %}{% if match %}Edit{% else %}Schedule{% endif %} Team Match{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / <a href="{{ url_for('team_matches.list_matches') }}">Team Matches</a> / {% if match %}Edit{% else %}New{% endif %}</span>{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-header">
        <h3><i class="fas fa-futbol"></i> {% if match %}Edit Match{% else %}Schedule New Match{% endif %} — {{ team.name }}</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{% if match %}{{ url_for('team_matches.edit_match', match_id=match.id) }}{% else %}{{ url_for('team_matches.create_match', team_id=team.id) }}{% endif %}" class="form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            
            <div class="form-row">
                <div class="form-group col-6">
                    <label for="title">Match Title</label>
                    <input type="text" id="title" name="title" class="form-input"
                           value="{{ match.title if match else 'Team Match — ' + team.name }}"
                           placeholder="e.g., Regular Season vs Opponent" required>
                </div>
                {% if not is_practice %}
                <div class="form-group col-6">
                    <label for="opponent">Opponent (optional)</label>
                    <input type="text" id="opponent" name="opponent" class="form-input"
                           value="{{ match.opponent if match else '' }}"
                           placeholder="e.g., University of Toronto">
                </div>
                {% endif %}
            </div>
            
            <div class="form-row">
                <div class="form-group col-4">
                    <label for="date">Date</label>
                    <input type="date" id="date" name="date" class="form-input"
                           value="{{ match.date.strftime('%Y-%m-%d') if match else '' }}"
                           required>
                </div>
                <div class="form-group col-4">
                    <label for="start_time">Start Time</label>
                    <input type="time" id="start_time" name="start_time" class="form-input"
                           value="{{ match.start_time.strftime('%H:%M') if match and match.start_time else '' }}">
                </div>
                <div class="form-group col-4">
                    <label for="end_time">End Time</label>
                    <input type="time" id="end_time" name="end_time" class="form-input"
                           value="{{ match.end_time.strftime('%H:%M') if match and match.end_time else '' }}">
                    <small class="text-muted">Auto-calculated if left empty (start + 30 min)</small>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group col-6">
                    <label for="location">Location</label>
                    <input type="text" id="location" name="location" class="form-input"
                           value="{{ match.location if match else '' }}"
                           placeholder="e.g., Online, Gym A">
                </div>
                {% if match %}
                <div class="form-group col-6">
                    <label for="status">Status</label>
                    <select id="status" name="status" class="form-select">
                        <option value="scheduled" {% if match.status == 'scheduled' %}selected{% endif %}>Scheduled</option>
                        <option value="completed" {% if match.status == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if match.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    </select>
                </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="description">Description (optional)</label>
                <textarea id="description" name="description" class="form-input" rows="3"
                          placeholder="Additional details about the match...">{{ match.description if match else '' }}</textarea>
            </div>
            
            {% if not match %}
            <!-- Player roster (pre-filled, read-only display) -->
            <div class="card mt-4">
                <div class="card-header">
                    <h4><i class="fas fa-users"></i> Team Roster (auto-included)</h4>
                    <span class="text-muted" style="font-size: 0.85rem;">All {{ team_players | length }} player(s) will be added automatically</span>
                </div>
                <div class="card-body">
                    {% if team_players %}
                    <div class="roster-list" style="display: flex; flex-wrap: wrap; gap: 8px;">
                        {% for tp in team_players %}
                        <span class="staff-tag">
                            {{ tp.player.username }}
                            {% if tp.status == 'substitute' %}
                            <span class="text-muted" style="font-size: 0.7rem;">(sub)</span>
                            {% endif %}
                        </span>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center py-3">
                        <i class="fas fa-users-slash"></i> No players on this team. Add players in the Teams page first.
                    </p>
                    {% endif %}
                </div>
            </div>
            {% else %}
            <!-- Edit mode: show participants with presence status -->
            <div class="card mt-4">
                <div class="card-header">
                    <h4><i class="fas fa-users"></i> Participants</h4>
                </div>
                <div class="card-body">
                    {% if match.participants %}
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Player</th>
                                <th>Presence</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in match.participants.all() %}
                            <tr>
                                <td>{{ p.player.username if p.player else 'Unknown' }}</td>
                                <td>
                                    {% if p.is_confirmed %}
                                    <span class="badge badge-success">✅ Confirmed</span>
                                    {% else %}
                                    <span class="badge badge-warning">⏳ Pending</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted text-center">No participants recorded.</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            <div class="form-actions mt-4">
                <a href="{{ url_for('team_matches.list_matches') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {% if match %}Save Changes{% else %}Schedule Match{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}