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

{% block head %}
    {{ parent() }}
    <style>
        .user-selection-container {
            background-color: #f8f9fa;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }

        .user-card {
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .user-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .user-info {
            padding: 1rem;
        }

        .user-name {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
        }

        .user-details {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .search-box {
            margin-bottom: 2rem;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container py-5">
        <div class="user-selection-container">
            <h1 class="text-center mb-4">Sélectionner un utilisateur - Omaha Beach Trail</h1>
            
            <div class="search-box">
                <input type="text" id="userSearch" class="form-control" placeholder="Rechercher par nom ou prénom...">
            </div>

            <div class="row" id="usersList">
                {% for user in users %}
                    <div class="col-md-6 col-lg-4 mb-3 user-item" 
                         data-name="{{ user.nom|lower }} {{ user.prenom|lower }}"
                         onclick="viewUserTrail({{ user.id }})">
                        <div class="card user-card h-100">
                            <div class="user-info">
                                <div class="user-name">
                                    {{ user.prenom }} {{ user.nom }}
                                </div>
                                <div class="user-details">
                                    {% if user.benevoleTrail %}
                                        <div><strong>Arrivée:</strong> {{ user.benevoleTrail.heureArrivee|date('H:i') }}</div>
                                        <div><strong>Départ:</strong> {{ user.benevoleTrail.heureDepart|date('H:i') }}</div>
                                    {% endif %}
                                    {% if user.telephone %}
                                        <div><strong>Tél:</strong> {{ user.telephone }}</div>
                                    {% endif %}
                                    {% if user.commentaire %}
                                        <div><strong>Qualité:</strong> {{ user.commentaire }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            {% if users|length == 0 %}
                <div class="text-center">
                    <p class="text-muted">Aucun utilisateur avec des données de bénévole trail trouvé.</p>
                </div>
            {% endif %}
        </div>
    </div>

    <script>
        function viewUserTrail(userId) {
            window.location.href = "{{ path('omaha_beach_trail') }}?user_id=" + userId;
        }

        // Search functionality
        document.getElementById('userSearch').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const userItems = document.querySelectorAll('.user-item');
            
            userItems.forEach(function(item) {
                const userName = item.getAttribute('data-name');
                if (userName.includes(searchTerm)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
{% endblock %}