{% extends "layout.html" %} {% block content %}

<!-- 🧠 Kopfbereich: Spieleranzeige -->
<div class="bg-gray-100 dark:bg-gray-800 rounded-2xl p-4 shadow mb-6">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
    Aktuelle Spieler
  </h2>
  <div class="flex flex-wrap gap-2">
    <div
      class="px-3 py-2 rounded-lg text-white font-semibold shadow"
      style="background-color: #e63946"
    >
      Basti: 0
    </div>
    <div
      class="px-3 py-2 rounded-lg text-white font-semibold shadow"
      style="background-color: #457b9d"
    >
      Admin: 0
    </div>
    <!-- Weitere Spieler hier -->
  </div>
</div>

<!-- 🎲 Spielfläche für Spieler -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 🧩 Ein Spielfeld -->
  <div class="bg-white dark:bg-gray-900 rounded-2xl shadow p-4">
    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">
      Spieler: Basti
    </h3>
    <div class="space-y-2">
      {% for kategorie in ["Einsen", "Zweien", "Dreien", "Vieren", "Fünfen",
      "Sechsen", "Dreierpasch", "Viererpasch", "Full House", "Kleine Straße",
      "Große Straße", "Kniffel", "Chance"] %}
      <div
        class="flex justify-between items-center bg-gray-100 dark:bg-gray-800 p-2 rounded-lg"
      >
        <span class="text-gray-800 dark:text-gray-200">{{ kategorie }}</span>
        <button
          class="w-12 h-10 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg text-center"
        >
          0
        </button>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Weitere Spielfelder bei Bedarf -->
</div>

<!-- 🎲 Würfelanzeige -->
<div class="mt-8 dice-row">
  <div class="flex justify-center gap-4 mb-4">
    {% for i in range(1, 6) %}
    <img
      src="{{ url_for('static', filename='img/dice/dice' + i|string + '-white.svg') }}"
      alt="Würfel {{ i }}"
      class="w-16 h-16 cursor-pointer hover:scale-110 transition-transform duration-200 hidden dark:block"
    />
    <img
      src="{{ url_for('static', filename='img/dice/dice' + i|string + '.svg') }}"
      alt="Würfel {{ i }}"
      class="w-16 h-16 cursor-pointer hover:scale-110 transition-transform duration-200 dark:hidden"
    />
    {% endfor %}
  </div>
</div>

<!-- 🧮 Fußbereich: Steuerung -->
<div class="mt-6 flex justify-center">
  <!-- Zustand: Noch kein Wurf erfolgt -->
  <button
    id="btn-wuerfeln"
    class="w-full md:w-auto px-8 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-bold rounded-full shadow transition-all"
  >
    WÜRFELN
  </button>

  <!-- Zustand nach Wurf: Anzeige von Dioden + Buttons -->
  <!-- Wird per JS eingeblendet -->
  <div id="spiel-controls" class="hidden flex gap-4 items-center">
    <div class="flex gap-1">
      <div class="w-4 h-4 bg-green-500 rounded-full"></div>
      <div class="w-4 h-4 bg-green-500 rounded-full"></div>
      <div class="w-4 h-4 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
    </div>
    <button
      class="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-bold rounded-full shadow"
    >
      WÜRFELN
    </button>
    <button
      class="px-6 py-3 bg-green-500 text-white font-bold rounded-full shadow opacity-50 cursor-not-allowed"
      disabled
    >
      SPIELEN
    </button>
  </div>
</div>

<script src="{{ url_for('static', filename='js/dice.js') }}"></script>

{% endblock %}