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

{% block title %}🎲 Yams{% endblock %}

{% block body %}
<div class="min-h-screen bg-stone-800 p-2 sm:p-4 flex items-start justify-center font-serif select-none">

    <div data-controller="yams" class="w-full max-w-lg bg-[#fcf9f2] text-stone-800 rounded-xl shadow-xl border-4 border-double border-stone-400 p-3 sm:p-5 my-2 overflow-x-auto">

        <!-- En-tête -->
        <div class="text-center border-b-2 border-stone-800 pb-3 mb-4">
            <h1 class="text-2xl font-black tracking-wider uppercase text-stone-900 border-2 border-stone-800 py-1 inline-block px-6 transform -rotate-1 shadow-[3px_3px_0px_rgba(43,38,31,1)]">
                YAMS LE GOUIC
            </h1>
            <p class="text-[10px] italic text-stone-500 mt-2 font-mono tracking-tight">VARIANTE DE COMPÉTITION — ÉDITION BALLAISON 2026</p>
        </div>

        <form id="form-yams" class="space-y-4">

            <!-- EN-TÊTE DU TABLEAU -->
            <div class="grid grid-cols-12 gap-1 items-center pb-2 border-b-2 border-stone-800 text-center font-mono text-[10px] font-bold bg-stone-100 rounded-t-lg p-1">
                <div class="col-span-4 text-left px-1">FIGURES</div>
                <div class="col-span-2 text-blue-700">LIBRE<br>↕</div>
                <div class="col-span-2 text-amber-700">DESC.<br>↓</div>
                <div class="col-span-2 text-purple-700">MONT.<br>↑</div>
                <div class="col-span-2 text-rose-700">IMP.<br>📢</div>
            </div>

            <!-- 1. SECTION SUPÉRIEURE (Saisie du nombre de dés 0 à 5) -->
            <div class="divide-y border-y border-stone-800 divide-stone-300">
                {% for i, nom in {1: 'Compte des AS ⚀', 2: 'Compte des DEUX ⚁', 3: 'Compte des TROIS ⚂', 4: 'Compte des QUATRE ⚃', 5: 'Compte des CINQ ⚄', 6: 'Compte des SIX ⚅'} %}
                    <div class="grid grid-cols-12 gap-1 items-center py-1.5 px-1 focus-within:bg-[#f3edd9] transition-colors">
                        <div class="col-span-4 text-xs font-bold text-stone-700">{{ nom }}</div>
                        {% for col in ['libre', 'desc', 'mont', 'imp'] %}
                            <div class="col-span-2 text-center relative group">
                                <input type="text" id="score-{{ i }}-{{ col }}"
                                       data-yams-target="caseSuperieure {{ col }}Input allInput"
                                       data-action="focus->yams#EditerDés input->yams#MiseAJourEnTempsReel blur->yams#SaisieDés"
                                       class="w-full text-center font-mono font-bold text-base bg-transparent border-b border-stone-400 focus:outline-none focus:border-red-700 text-stone-900 placeholder-stone-300" placeholder="—">
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

            <!-- 2. SOUS-TOTAL DES DÉS & PRIME (Seuil à 60) -->
            <div class="border border-stone-400 rounded-lg bg-stone-100/60 p-2 space-y-1 text-[11px] font-mono font-bold shadow-sm">
                <div class="grid grid-cols-12 gap-1 text-center">
                    <div class="col-span-4 text-left text-stone-600">Total :</div>
                    <div class="col-span-2 text-blue-800" data-yams-target="sousTotalLibre">0</div>
                    <div class="col-span-2 text-amber-800" data-yams-target="sousTotalDesc">0</div>
                    <div class="col-span-2 text-purple-800" data-yams-target="sousTotalMont">0</div>
                    <div class="col-span-2 text-rose-800" data-yams-target="sousTotalImp">0</div>
                </div>
                <div class="grid grid-cols-12 gap-1 text-center">
                    <div class="col-span-4 text-left text-stone-600">Prime (≥60) :</div>
                    <div class="col-span-2" data-yams-target="bonusLibre">—</div>
                    <div class="col-span-2" data-yams-target="bonusDesc">—</div>
                    <div class="col-span-2" data-yams-target="bonusMont">—</div>
                    <div class="col-span-2" data-yams-target="bonusImp">—</div>
                </div>
            </div>

            <!-- 3. SECTION ENTIÈRE POUR LE MINI-MAXI -->
            <div class="border border-stone-400 rounded-lg bg-stone-50/50 p-2 space-y-2 shadow-sm">
                <div class="divide-y divide-stone-300/80">
                    {# Ligne MINI #}
                    <div class="grid grid-cols-12 gap-1 items-center py-1.5 px-1 focus-within:bg-[#f3edd9] transition-colors">
                        <div class="col-span-4 text-xs font-bold text-stone-600 italic">MINI (Total Dés)</div>
                        {% for col in ['libre', 'desc', 'mont', 'imp'] %}
                            <div class="col-span-2 text-center">
                                <input type="number" id="score-mini-{{ col }}"
                                       data-yams-target="caseMini {{ col }}Input allInput"
                                       data-action="input->yams#SaisieScoreClassique"
                                       class="w-full text-center font-sans font-bold text-base bg-transparent border-b border-stone-400 focus:outline-none focus:border-red-700 text-stone-900 placeholder-stone-300 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" placeholder="—" min="0">
                            </div>
                        {% endfor %}
                    </div>

                    {# Ligne MAXI #}
                    <div class="grid grid-cols-12 gap-1 items-center py-1.5 px-1 focus-within:bg-[#f3edd9] transition-colors">
                        <div class="col-span-4 text-xs font-bold text-stone-600 italic">MAXI (Total Dés)</div>
                        {% for col in ['libre', 'desc', 'mont', 'imp'] %}
                            <div class="col-span-2 text-center">
                                <input type="number" id="score-maxi-{{ col }}"
                                       data-yams-target="caseMaxi {{ col }}Input allInput"
                                       data-action="input->yams#SaisieScoreClassique"
                                       class="w-full text-center font-sans font-bold text-base bg-transparent border-b border-stone-400 focus:outline-none focus:border-red-700 text-stone-900 placeholder-stone-300 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" placeholder="—" min="0">
                            </div>
                        {% endfor %}
                    </div>

                    {# Ligne DIFFÉRENCE #}
                    <div class="grid grid-cols-12 gap-1 items-center py-2 px-1 font-mono text-xs font-bold pt-2">
                        <div class="col-span-4 text-stone-800 leading-tight">💥 DIFFÉRENCE<br><span class="text-[9px] font-normal text-stone-500">(Maxi-Mini) * Nbr As</span></div>
                        <div class="col-span-2 text-center text-blue-900 text-sm" data-yams-target="diffLibre">0</div>
                        <div class="col-span-2 text-center text-amber-900 text-sm" data-yams-target="diffDesc">0</div>
                        <div class="col-span-2 text-center text-purple-900 text-sm" data-yams-target="diffMont">0</div>
                        <div class="col-span-2 text-center text-rose-900 text-sm" data-yams-target="diffImp">0</div>
                    </div>
                </div>
            </div>

            <!-- 4. COMBINAISONS (Inputs type text pour afficher les croix et les calculs bonus) -->
            <div class="divide-y border-y border-stone-800 divide-stone-300">
                {% for id, label in {
                    'brelan': 'BRELAN (Total)',
                    'petite': 'PETITE SUITE (+30)',
                    'grande': 'GRANDE SUITE (+40)',
                    'full': 'FULL HOUSE (+30)',
                    'carre': 'CARRÉ (+40)',
                    'yams': 'LE YAMS (+50)'
                } %}
                    <div class="grid grid-cols-12 gap-1 items-center py-1.5 px-1 focus-within:bg-[#f3edd9] transition-colors">
                        <div class="col-span-4 text-xs font-bold text-stone-700 leading-tight">{{ label }}</div>
                        {% for col in ['libre', 'desc', 'mont', 'imp'] %}
                            <div class="col-span-2 text-center">
                                <input type="text" id="score-{{ id }}-{{ col }}"
                                       data-yams-target="caseInferieure {{ col }}Input allInput"
                                       data-action="focus->yams#EditerCombinaison blur->yams#SaisieCombinaison"
                                       class="w-full text-center font-mono font-bold text-base bg-transparent border-b border-stone-400 focus:outline-none focus:border-red-700 text-stone-900 placeholder-stone-300" placeholder="—">
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

            <!-- TOTAL GÉNÉRAL -->
            <div class="border-2 border-stone-800 p-2 rounded-xl bg-white shadow-inner space-y-1">
                <div class="grid grid-cols-12 gap-1 text-center font-mono font-black text-xs border-b border-stone-200 pb-1">
                    <div class="col-span-4 text-left font-serif text-sm">TOTAL COL.</div>
                    <div class="col-span-2 text-blue-800" data-yams-target="totalLibre">0</div>
                    <div class="col-span-2 text-amber-800" data-yams-target="totalDesc">0</div>
                    <div class="col-span-2 text-purple-800" data-yams-target="totalMont">0</div>
                    <div class="col-span-2 text-rose-800" data-yams-target="totalImp">0</div>
                </div>
                <div class="flex justify-between items-center pt-1 px-1">
                    <span class="text-sm font-black tracking-wider text-stone-900 uppercase">SCORE CUMULÉ</span>
                    <div class="text-xl font-mono font-black text-blue-900 transform rotate-1">
                        <span data-yams-target="superTotal">0</span> <span class="text-xs font-serif font-normal text-blue-950/70">pts</span>
                    </div>
                </div>
            </div>

            <!-- BOUTON RESET -->
            <button type="button" data-action="click->yams#reset" class="w-full bg-stone-200 hover:bg-stone-300 text-stone-700 border-b-4 border-stone-400 active:border-b-0 active:mt-1 font-mono font-bold py-2 px-4 rounded-xl transition-all text-xs tracking-tight uppercase">
                ⚙️ Gommer le carnet (Reset)
            </button>
        </form>
    </div>
</div>
{% endblock %}