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

{% block title %}Accueil - Ma collection de créatures{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
{% endblock %}

{% block body %}

    <h1>🧬 Ma collection de créatures 🐾</h1>

    <div class="filter-bar">
        <label for="search-input">🔍 Rechercher un nom :</label>
        <input type="text" id="search-input" placeholder="ex: Bob..." />

        <label for="rarete-filter">Filtrer par rareté :</label>
        <select id="rarete-filter">
            <option value="">Toutes</option>
            <option value="green">Communes</option>
            <option value="purple">Épiques</option>
            <option value="red">Mythiques</option>
            <option value="gold">Légendaires</option>
        </select>

        <label for="sort-select">Trier par :</label>
        <select id="sort-select">
            <option value="none">--</option>
            <option value="level">Level</option>
            <option value="force">Force</option>
            <option value="vitesse">Vitesse</option>
        </select>
    </div>

    <div id="selection-status">Sélectionnez 2 créatures...</div>

    <div class="emoji-container">
        {% for emoji in emojis %}
            <div class="emoji-card {{ emoji.color }}" data-id="{{ emoji.id }}" data-name="{{ emoji.nom }}" 
                                    data-color="{{ emoji.color }}" data-level="{{ emoji.nbCombatGagne }}"
                                    data-force="{{ emoji.force }}" data-vitesse="{{ emoji.vitesse }}">

                <div class="emoji-level">Level {{ emoji.nbCombatGagne }}</div>
                <div class="emoji">{{ emoji.code }}</div>
                <div class="emoji-name {{ emoji.color }}">{{ emoji.nom }}</div>
                <div class="detail-icon">ℹ️</div>

                <div class="popup" id="popup-{{ emoji.id }}">
                    <strong>Stats :</strong><br>
                    Force: {{ emoji.force }}<br>
                    Robustesse: {{ emoji.robustesse }}<br>
                    Intelligence: {{ emoji.intelligence }}<br>
                    Vitesse: {{ emoji.vitesse }}
                </div>
            </div>
        {% endfor %}
    </div>

    <div id="selection-visual" class="selection-visual"></div>

    <div class="action-buttons">
        <button class="btn" ">⚔️ Combattre</button>
        <button class="btn" ">💞 Reproduire</button>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/home.js') }}"></script>
{% endblock %}