{% extends 'base.html.twig' %}

{% block title %}Équipe {{ team.name }}{% endblock %}

{% block body %}
<div class="container-fluid px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- En-tête avec actions -->
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center space-x-4">
                <a href="{{ path('app_user_index') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Retour
                </a>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{{ team.name }}</h1>
                    {% if team.description %}
                        <p class="text-gray-600 mt-1">{{ team.description }}</p>
                    {% endif %}
                </div>
            </div>
            
            {% if can_edit %}
                <div class="flex space-x-2">
                    <a href="{{ path('app_team_edit', {id: team.id}) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-edit mr-2"></i>
                        Modifier
                    </a>
                    {% if is_admin %}
                        <button onclick="deleteTeam({{ team.id }})" class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors">
                            <i class="fas fa-trash mr-2"></i>
                            Supprimer
                        </button>
                    {% endif %}
                </div>
            {% endif %}
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Informations de l'équipe -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Informations</h2>
                    </div>
                    <div class="px-6 py-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'équipe</label>
                            <p class="text-gray-900">{{ team.name }}</p>
                        </div>
                        
                        {% if team.description %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                                <p class="text-gray-900">{{ team.description }}</p>
                            </div>
                        {% endif %}
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Chef d'équipe</label>
                            {% if team.leader %}
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                        <span class="text-white text-sm font-medium">
                                            {{ team.leader.firstName|first }}{{ team.leader.lastName|first }}
                                        </span>
                                    </div>
                                    <div>
                                        <p class="text-gray-900 font-medium">{{ team.leader.fullName }}</p>
                                        <p class="text-gray-500 text-sm">{{ team.leader.email }}</p>
                                    </div>
                                </div>
                            {% else %}
                                <p class="text-gray-500 italic">Aucun chef d'équipe assigné</p>
                            {% endif %}
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Date de création</label>
                            <p class="text-gray-900">{{ team.createdAt|date('d/m/Y') }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre de membres</label>
                            <p class="text-gray-900">{{ team.members|length }} membre{{ team.members|length > 1 ? 's' : '' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Liste des membres -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Membres de l'équipe</h2>
                    </div>
                    <div class="px-6 py-4">
                        {% if team.members|length > 0 %}
                            <div class="space-y-4">
                                {% for member in team.members %}
                                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                                        <div class="flex items-center space-x-4">
                                            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                                <span class="text-white font-medium">
                                                    {{ member.firstName|first }}{{ member.lastName|first }}
                                                </span>
                                            </div>
                                            <div>
                                                <h3 class="font-medium text-gray-900">
                                                    {{ member.fullName }}
                                                    {% if member == team.leader %}
                                                        <span class="inline-flex items-center px-2 py-1 ml-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
                                                            <i class="fas fa-crown mr-1"></i>
                                                            Chef
                                                        </span>
                                                    {% endif %}
                                                </h3>
                                                <p class="text-sm text-gray-600">{{ member.email }}</p>
                                                {% if member.role %}
                                                    <p class="text-sm text-gray-500">{{ member.role.name }}</p>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <div class="flex space-x-2">
                                            <a href="{{ path('app_user_show', {id: member.id}) }}" class="inline-flex items-center px-3 py-1 text-sm text-blue-600 hover:text-blue-800 transition-colors">
                                                <i class="fas fa-eye mr-1"></i>
                                                Voir
                                            </a>
                                            {% if can_edit %}
                                                <a href="{{ path('app_user_edit', {id: member.id}) }}" class="inline-flex items-center px-3 py-1 text-sm text-gray-600 hover:text-gray-800 transition-colors">
                                                    <i class="fas fa-edit mr-1"></i>
                                                    Modifier
                                                </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-8">
                                <i class="fas fa-users text-4xl text-gray-300 mb-4"></i>
                                <p class="text-gray-500">Aucun membre dans cette équipe</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Script pour la suppression -->
<script>
function deleteTeam(teamId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette équipe ? Cette action est irréversible.')) {
        fetch(`/users/team/${teamId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ path('app_user_index') }}';
            } else {
                alert('Erreur lors de la suppression: ' + (data.error || 'Erreur inconnue'));
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            alert('Erreur lors de la suppression de l\'équipe');
        });
    }
}
</script>
{% endblock %}