{% extends 'base.html' %}

{% block title %}Sub17 - TikiStats{% endblock %}

{% block nav_sub17 %}active{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-4">
                <i class="fas fa-users-cog"></i> División Sub17
            </h1>
            <p class="text-muted">Gestión y estadísticas de la categoría Sub17</p>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="stat-number">{{ total_players }}</div>
                <div class="stat-label">Jugadores</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="stat-number">{{ matches_played }}</div>
                <div class="stat-label">Partidos Jugados</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="stat-number">{{ win_rate }}%</div>
                <div class="stat-label">% Victoria</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="stat-number">{{ goals_scored }}</div>
                <div class="stat-label">Goles Anotados</div>
            </div>
        </div>
    </div>

    <!-- Recent Matches -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3><i class="fas fa-calendar-alt"></i> Partidos Recientes</h3>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i> Nuevo Partido
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-dark table-hover">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Rival</th>
                                <th>Resultado</th>
                                <th>Competición</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for match in recent_matches %}
                            <tr>
                                <td>{{ match.date }}</td>
                                <td>{{ match.opponent }}</td>
                                <td>
                                    <span class="badge {% if match.result == 'W' %}bg-success{% elif match.result == 'L' %}bg-danger{% else %}bg-warning{% endif %}">
                                        {{ match.score }}
                                    </span>
                                </td>
                                <td>{{ match.competition }}</td>
                                <td>
                                    <!-- CAMBIAR ESTOS BOTONES PARA QUE NAVEGUEN AL DETALLE -->
                                    <a href="{% url 'dashboard:matchs' division_id=division_id match_id=match.id %}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-chart-bar"></i> Ver Estadísticas
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-muted">No hay partidos registrados</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Players List -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3><i class="fas fa-users"></i> Plantilla Sub17</h3>
                    <button class="btn btn-primary">
                        <i class="fas fa-user-plus"></i> Agregar Jugador
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-dark table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Nombre</th>
                                <th>Posición</th>
                                <th>Edad</th>
                                <th>Partidos</th>
                                <th>Goles</th>
                                <th>Asistencias</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for player in players %}
                            <tr>
                                <td>{{ player.number }}</td>
                                <td>{{ player.name }}</td>
                                <td>{{ player.position }}</td>
                                <td>{{ player.age }}</td>
                                <td>{{ player.matches }}</td>
                                <td>{{ player.goals }}</td>
                                <td>{{ player.assists }}</td>
                                <td>
                                    <button class="btn btn-sm btn-secondary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center text-muted">No hay jugadores registrados</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}