{% extends "base.html" %}
{% block title %}Écrans — {{ game.name }}{% endblock %}
{% block content_class %}content-wide content-objectEdit{% endblock %}
{% block body_class %}objectEditBody{% endblock %}
{% block breadcrumb %}
<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
<li class="is-active"><a>Écrans</a></li>
{% endblock %}
{% block content %}
<h1 class="title">Écrans du jeu</h1>
{% 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 %}

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

  <div class="colRight">
    <h2>Enchaînement des écrans</h2>
    {% if screen_list %}
    <div class="fieldsTableWrap">
      <table class="table is-fullwidth is-hoverable fieldsTable">
        <thead><tr><th>#</th><th>Nom</th><th></th></tr></thead>
        <tbody>
          {% for s in screen_list %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>
              <a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">{{ s.name }}</a>
              {% if loop.first %} <span class="tag is-info is-light">★ Départ</span>{% endif %}
            </td>
            <td class="fieldsTableActions">
              <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="button is-small" {{ '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="button is-small" {{ 'disabled' if loop.last else '' }}>↓</button></form>
              <a class="button is-small" 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="button is-small is-danger">🗑️</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="hint">Aucun écran pour l'instant — crée le premier à gauche.</p>
    {% endif %}
  </div>
</div>
{% endblock %}