{% 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.4') }}">
{% endblock %}

{% block body %}
    {% if app.user %}
        <div class="logout-container">
            <span style="margin-right: 20px; ">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">🚪Déconnexion</button>
            </form>
        </div>

        <div id="user-data" data-user-id="{{ user.id }}"></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.name }}"
                data-color="{{ emoji.color }}"
                data-level="{{ emoji.fightsWon }}"
                data-force="{{ emoji.strength }}"
                data-vitesse="{{ emoji.speed }}">

                <div class="emoji-level">Level {{ emoji.fightsWon }}</div>
                <div class="emoji">{{ emoji.code }}</div>
                <div class="emoji-name {{ emoji.color }}">{{ emoji.name }}</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.strength }}<br>
                    Robustesse: {{ emoji.toughness }}<br>
                    Intelligence: {{ emoji.intelligence }}<br>
                    Vitesse: {{ emoji.speed }}
                </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.name }}"
                data-color="{{ emoji.color }}"
                data-level="{{ emoji.fightsWon }}"
                data-force="{{ emoji.strength }}"
                data-vitesse="{{ emoji.speed }}">

                <div class="emoji-level">Level {{ emoji.fightsWon }}</div>
                <div class="emoji">
                    {% if 'vercel' in emoji.code %}
                        <img src="{{ emoji.code }}" alt="{{ emoji.name }}" width="48" height="48" />
                    {% else %}
                        {{ emoji.code }}
                    {% endif %}
                </div>
                <div class="emoji-name {{ emoji.color }}">{{ emoji.name }}</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.strength }}<br>
                    Robustesse: {{ emoji.toughness }}<br>
                    Intelligence: {{ emoji.intelligence }}<br>
                    Vitesse: {{ emoji.speed }}
                </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.8') }}"></script>
{% endblock %}