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

{% block title %}{{ player.name }} - Perfil del Jugador{% endblock %}

{% block extra_head %}
<style>
    .player-profile-photo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--color-green);
        box-shadow: 0 4px 20px rgba(128, 218, 71, 0.4);
    }
    
    .player-jersey-badge {
        position: absolute;
        bottom: -5px;
        right: -5px;
        background: var(--color-green);
        color: var(--color-dark);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: bold;
        border: 3px solid var(--color-dark);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header del Jugador -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <!-- Foto del Jugador con Badge de Número -->
                        <div class="me-4 position-relative">
                            {% if player.logo %}
                                <img src="/imgs/players/{{ player.logo }}" 
                                     alt="{{ player.name }}" 
                                     class="player-profile-photo"
                                    onerror="this.src='/imgs/players/default_playerpfp.png'">
                            {% else %}
                                <img src="/imgs/players/default_playerpfp.png" 
                                     alt="Foto por defecto" 
                                     class="player-profile-photo">
                            {% endif %}
                            
                            {% if team_division_player %}
                            <div class="player-jersey-badge">
                                {{ team_division_player.jersey_number }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div>
                            <h1 class="mb-1">{{ player.name }}</h1>
                            <p class="text-muted mb-0">
                                {% if player.position %}
                                    <span class="badge bg-success me-2">{{ player.position.name }}</span>
                                {% endif %}
                                {% if team %}
                                    <i class="fas fa-shield-alt me-2"></i>{{ team.name }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    <a href="{% url 'dashboard:team_roster' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver a Plantilla
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Métricas en Desarrollo -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card text-center">
                <h4 class="text-muted">
                    <i class="fas fa-chart-line me-2"></i>Métricas en Desarrollo
                </h4>
                <p class="text-muted">Las estadísticas detalladas estarán disponibles próximamente.</p>
            </div>
        </div>
    </div>
    
    <!-- Últimos Partidos -->
    <div class="row">
        <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>Partido</th>
                                <th class="text-center">Resultado</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for match in recent_matches %}
                            <tr>
                                <td>{{ match.date|date:"d/m/Y" }}</td>
                                <td>
                                    {{ match.home_team_division.team.name }} vs {{ match.away_team_division.team.name }}
                                </td>
                                <td class="text-center">
                                    <strong>{{ match.score_home }} - {{ match.score_away }}</strong>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">No hay partidos registrados</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}