{% extends 'base.html' %}
{% load static %}

{% block title %}Perfil del Equipo - {{ team.name }}{% endblock %}

{% block nav_equipo %}active{% endblock %}
{% block nav_team_profile %}active{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header del Equipo -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="d-flex align-items-center">
                    {% if team.logo %}
                        <img src="/imgs/teams/{{ team.logo }}" 
                            alt="{{ team.name }}" 
                            style="width: 80px; height: 80px; object-fit: contain; margin-right: 20px;"
                            onerror="this.src='/imgs/teams/default_teampfp.png'">
                    {% else %}
                        <img src="/imgs/teams/default_teampfp.png"
                            alt="Logo por defecto" 
                            style="width: 80px; height: 80px; object-fit: contain; margin-right: 20px;">
                    {% endif %}
                    <div>
                        <h1 class="mb-1">{{ team.name }}</h1>
                        <p class="text-muted mb-0">
                            {% if active_competition %}
                                <span class="ms-3"><i class="fas fa-trophy me-2"></i>{{ active_competition.name }}</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Estadísticas Generales -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stat-card card">
                <div class="stat-number">{{ stats.points }}</div>
                <div class="stat-label">Puntos</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card card">
                <div class="stat-number">{{ stats.matches_played }}</div>
                <div class="stat-label">Partidos Jugados</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card card">
                <div class="stat-number">{{ stats.goals_for }}</div>
                <div class="stat-label">Goles a Favor</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card card">
                <div class="stat-number">{{ stats.goal_difference|stringformat:"+d" }}</div>
                <div class="stat-label">Diferencia de Goles</div>
            </div>
        </div>
    </div>
    
    <!-- Desglose de Resultados -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card text-center">
                <h3 class="text-success">{{ stats.wins }}</h3>
                <p class="text-muted">Victorias</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center">
                <h3 class="text-warning">{{ stats.draws }}</h3>
                <p class="text-muted">Empates</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center">
                <h3 class="text-danger">{{ stats.losses }}</h3>
                <p class="text-muted">Derrotas</p>
            </div>
        </div>
    </div>
    
    <!-- Últimos Partidos -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <h4 class="mb-3"><i class="fas fa-history me-2"></i>Últimos Partidos</h4>
                <div class="table-responsive">
                    <table class="table table-dark">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Rival</th>
                                <th class="text-center">Resultado</th>
                                <th class="text-center">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for match in recent_matches %}
                            <tr>
                                <td>{{ match.date|date:"d/m/Y" }}</td>
                                <td>
                                    {% if match.home_team_division.team.id == team.id %}
                                        vs {{ match.away_team_division.team.name }} (L)
                                    {% else %}
                                        @ {{ match.home_team_division.team.name }} (V)
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <strong>
                                        {% if match.home_team_division.team.id == team.id %}
                                            {{ match.score_home }} - {{ match.score_away }}
                                        {% else %}
                                            {{ match.score_away }} - {{ match.score_home }}
                                        {% endif %}
                                    </strong>
                                </td>
                                <td class="text-center">
                                    {% if match.home_team_division.team.id == team.id %}
                                        {% if match.score_home > match.score_away %}
                                            <span class="badge bg-success">Victoria</span>
                                        {% elif match.score_home == match.score_away %}
                                            <span class="badge bg-warning">Empate</span>
                                        {% else %}
                                            <span class="badge bg-danger">Derrota</span>
                                        {% endif %}
                                    {% else %}
                                        {% if match.score_away > match.score_home %}
                                            <span class="badge bg-success">Victoria</span>
                                        {% elif match.score_away == match.score_home %}
                                            <span class="badge bg-warning">Empate</span>
                                        {% else %}
                                            <span class="badge bg-danger">Derrota</span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center text-muted">No hay partidos jugados</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Preview de Jugadores -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0"><i class="fas fa-users me-2"></i>Jugadores ({{ players_count }})</h4>
                    <a href="{% url 'dashboard:team_roster' %}" class="btn btn-primary">
                        Ver Plantilla Completa <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
                
                <div class="row">
                    {% for tdp in players_preview %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'dashboard:player_profile' player_id=tdp.player.id %}" class="text-decoration-none">
                            <div class="card" style="background: rgba(255,255,255,0.05);">
                                <div class="d-flex align-items-center p-3">
                                    <div class="me-3" style="font-size: 2rem; font-weight: bold; color: var(--color-green);">
                                        {{ tdp.jersey_number }}
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ tdp.player.name }}</h6>
                                        <small class="text-muted">{{ tdp.player.position.name|default:"Sin posición" }}</small>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}