{% 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 %}
    {% if app.user %}
        <div class="logout-container">
            Connecté en tant que <strong>{{ app.user.username }}</strong>
            <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</h2>

    <div class="emoji-container">
        {% for emoji in emojis %}
            <div class="emoji-card {{ emoji.color | default('green') }}"
                data-id="{{ emoji.id }}"
                data-name="{{ emoji.name }}"
                data-color="{{ emoji.color | default('green') }}"
                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 | default('green') }}">{{ emoji.name }}</div>
                <div class="detail-icon" 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 %}
    </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.3') }}"></script>
{% endblock %}