{% extends "base.html" %}
{% block title %}Variables — {{ game.name }}{% endblock %}
{% block content_class %}content-page{% endblock %}
{% block body_class %}pageBody{% endblock %}
{% block breadcrumb %}
<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
<li class="is-active"><a>Variables</a></li>
{% endblock %}
{% block content %}
<h1 class="title">Variables globales</h1>
<p class="hint mb-4">Des propriétés/valeurs communes à tout le jeu (pas attachées à un objet de données précis) — utile par exemple pour une porte ouverte ou non, un niveau débloqué... Une variable peut être lue dans une "Condition de visibilité" (propriétés d'un élément) et modifiée par une action "Modifier une variable" (Logique de la scène).</p>

<form method="post" action="{{ url_for('create_global_var', slug=game.slug) }}" class="card">
  <div class="fieldRow">
    <div class="formField" style="flex:1;">
      <label for="new-var-name">Nom</label>
      <input type="text" id="new-var-name" name="name" placeholder="ex. porte_ouverte" required autocomplete="off">
    </div>
    <div class="formField">
      <label for="new-var-type">Type</label>
      <select id="new-var-type" name="type">
        {% for key, val in variable_types.items() %}
        <option value="{{ key }}">{{ val.label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="formField">
      <label for="new-var-value">Valeur de départ</label>
      <input type="text" id="new-var-value" name="default_value" placeholder="ex. 0" autocomplete="off">
    </div>
  </div>
  <div class="actionsRow"><button type="submit" class="primary">+ Créer la variable</button></div>
</form>

<h2>Variables définies</h2>
<div class="scrollArea">
{% if variables %}
{% for v in variables %}
<form method="post" action="{{ url_for('global_var_edit', slug=game.slug, var_id=v.id) }}" id="varEditForm{{ v.id }}"></form>
{% endfor %}
<div class="fieldsTableWrap">
  <table class="table is-fullwidth is-hoverable fieldsTable">
    <thead><tr><th>Nom</th><th>Type</th><th>Valeur</th><th></th></tr></thead>
    <tbody>
      {% for v in variables %}
      <tr>
        <td>{{ v.name }}</td>
        <td>
          <select form="varEditForm{{ v.id }}" name="type" aria-label="Type de « {{ v.name }} »">
            {% for key, val in variable_types.items() %}
            <option value="{{ key }}" {{ 'selected' if v.type == key else '' }}>{{ val.label }}</option>
            {% endfor %}
          </select>
        </td>
        <td><input type="text" form="varEditForm{{ v.id }}" name="value" value="{{ v.value or '' }}" aria-label="Valeur de « {{ v.name }} »"></td>
        <td class="fieldsTableActions">
          <button type="submit" form="varEditForm{{ v.id }}" class="button is-small">Enregistrer</button>
          <form method="post" action="{{ url_for('global_var_delete', slug=game.slug, var_id=v.id) }}"
                onsubmit="return confirm('Supprimer la variable « {{ v.name }} » ? Toute condition de visibilité ou action qui la référence cessera de fonctionner.');">
            <button type="submit" class="button is-small is-danger">🗑️</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<p class="hint">Aucune variable pour l'instant — crée la première ci-dessus.</p>
{% endif %}
</div>
{% endblock %}