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

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

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

{% block body %}
    {% if app.user %}
        <div class="logout-container">
            <span style="margin-right: 20px; text-decoration: underline">Connecté en tant que <strong>{{ app.user.username }}</strong></span>
            <form action="{{ path('app_logout') }}" method="post" style="display: inline;">
                <button type="submit" class="btn btn-logout">🚪 Se déconnecter</button>
            </form>
        </div>
    {% endif %}

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

    <h2 class="section-title">🌱 Vos créatures de base</h2>

    <div class="emoji-container base">
        {% for emoji in emojisDeBase %}
            <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" data-id="{{ emoji.id }}">ℹ️</div>
                <div class="detail-icon-hierarchy" data-id="{{ emoji.id }}">👨‍👩‍👧‍👦</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 %}

        {% for emoji in emojisDeBase %}
            <div class="hierarchy-modal" id="popup-hiera-{{ emoji.id }}">
                <div class="hierarchy-overlay" data-id="{{ emoji.id }}"></div>
                <div class="hierarchy-content">
                    <span class="close-btn" data-id="{{ emoji.id }}">&times;</span>
                    <div class="hierarchy-graph">
                        <div class="parent-block parent1">
                            <div class="emoji" id="parent1-{{ emoji.id }}"></div>
                            <div class="name" id="name-parent1-{{ emoji.id }}"></div>
                        </div>

                        <div class="arrows">
                            <div class="arrow">⬇️</div>
                        </div>

                        <div class="parent-block parent2">
                            <div class="emoji" id="parent2-{{ emoji.id }}"></div>
                            <div class="name" id="name-parent2-{{ emoji.id }}"></div>
                        </div>

                        <div class="child-block">
                            <div class="child" id="child-{{ emoji.id }}"></div>
                            <div class="name" id="name-child-{{ emoji.id }}"></div>
                        </div>
                        
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="section-break-icon">🔻</div>

    <h2 class="section-title">📦 Votre collection personnelle</h2>

    <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 class="emoji-container" id="collection-container">
        {% for emoji in emojisCrees %}
            <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" data-id="{{ emoji.id }}">ℹ️</div>
                <div class="detail-icon-hierarchy" data-id="{{ emoji.id }}">👨‍👩‍👧‍👦</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 %}

        {% for emoji in emojisCrees %}
            <div class="hierarchy-modal" id="popup-hiera-{{ emoji.id }}">
                <div class="hierarchy-overlay" data-id="{{ emoji.id }}"></div>
                <div class="hierarchy-content">
                    <span class="close-btn" data-id="{{ emoji.id }}">&times;</span>
                    <div class="hierarchy-graph">
                        <div class="parent-block parent1">
                            <div class="emoji" id="parent1-{{ emoji.id }}"></div>
                            <div class="name" id="name-parent1-{{ emoji.id }}"></div>
                        </div>

                        <div class="arrows">
                            <div class="arrow">⬇️</div>
                        </div>

                        <div class="parent-block parent2">
                            <div class="emoji" id="parent2-{{ emoji.id }}"></div>
                            <div class="name" id="name-parent2-{{ emoji.id }}"></div>
                        </div>

                        <div class="child-block">
                            <div class="child" id="child-{{ emoji.id }}"></div>
                            <div class="name" id="name-child-{{ emoji.id }}"></div>
                        </div>
                        
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div id="pagination" class="pagination-bar"></div>

    <div id="selection-status">Sélectionnez 2 créatures de votre choix pour commencer ...</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?v=1.2') }}"></script>
{% endblock %}