{% extends "base.html" %}
{% block title %}Écrans — {{ game.name }}{% endblock %}
{% block breadcrumb %}
<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
<span class="crumb-sep">/</span><span class="crumb">Écrans</span>
{% endblock %}
{% block content %}
<h1>Écrans du jeu</h1>

<form method="post" action="{{ url_for('screens_new', slug=game.slug) }}" class="card inline-form">
  <label for="name">Nom du nouvel écran</label>
  <div class="fieldRow">
    <input type="text" id="name" name="name" placeholder="ex. Accueil, Formulaire d'inscription, Scène 1..." required>
    <button type="submit" class="primary">+ Créer l'écran</button>
  </div>
</form>

{% if request.args.get('blocked_screen') %}
<div class="warningBanner">
  ⚠️ Suppression impossible : au moins un autre écran a un bouton qui cible précisément celui-ci. Retire d'abord cette action.
</div>
{% endif %}

<h2>Enchaînement des écrans</h2>
{% if screen_list %}
<div class="list">
  {% for s in screen_list %}
  <div class="listRow listRowFlex">
    <a class="rowLink" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">
      <div class="rowTitle">{{ loop.index }}. {{ s.name }}{% if loop.first %} <span class="hint">★ Écran de départ</span>{% endif %}</div>
    </a>
    <div class="rowActions">
      <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="up"><button type="submit" class="smallBtn" {{ 'disabled' if loop.first else '' }}>↑</button></form>
      <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="down"><button type="submit" class="smallBtn" {{ 'disabled' if loop.last else '' }}>↓</button></form>
      <a class="smallBtn" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">✏️</a>
      <form method="post" action="{{ url_for('screen_delete', slug=game.slug, screen_id=s.id) }}"
            onsubmit="return confirm('Supprimer l\'écran « {{ s.name }} » et tous ses éléments ?');">
        <button type="submit" class="smallBtn danger">🗑️</button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<p class="hint">Aucun écran pour l'instant — crée le premier ci-dessus.</p>
{% endif %}
{% endblock %}