{% extends "base.html" %}
{% block title %}Variables — {{ game.name }}{% endblock %}
{% block content_class %}content-wide{% 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">
  <h3>Nouvelle variable</h3>
  <div class="fieldRow">
    <div class="formField">
      <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>
{% if variables %}
<div class="list">
  {% 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>
  <div class="listRow">
    <div class="listRowFlex">
      <div class="rowLink">
        <div class="rowTitle">{{ v.name }}</div>
        <div class="rowSub">valeur actuelle : {{ v.value if v.value is not none and v.value != '' else '(vide)' }}</div>
      </div>
      <div class="rowActions">
        <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>
        <input type="text" form="varEditForm{{ v.id }}" name="value" value="{{ v.value or '' }}" aria-label="Valeur de « {{ v.name }} »" style="width:120px;">
        <button type="submit" form="varEditForm{{ v.id }}" class="smallBtn">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="smallBtn danger">🗑️</button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<p class="hint">Aucune variable pour l'instant — crée la première ci-dessus.</p>
{% endif %}
{% endblock %}