{% extends "base.html" %}
{% block title %}Éléments de jeu — {{ game.name }}{% endblock %}
{% block content_class %}content-wide content-objectEdit{% endblock %}
{% block body_class %}objectEditBody{% endblock %}
{% block content %}
<h1 class="title">Éléments de jeu</h1>
<p class="hint mb-4">Un élément de jeu est un conteneur réutilisable.</p>

<div class="twoCol">
  <div class="colLeft">
    <h2>Créer</h2>
    <form method="post" class="card">
      <div class="fieldRow">
        <div class="formField" style="flex:0 0 80px;">
          <label for="icon">Icône</label>
          <input type="text" id="icon" name="icon" value="🧩" maxlength="4">
        </div>
        <div class="formField" style="flex:1;">
          <label for="name">Nom</label>
          <input type="text" id="name" name="name" placeholder="ex. Personnage, Outil, Carte mail..." required>
        </div>
      </div>
      <div class="formField">
        <label for="bound_definition_id">Objet lié (optionnel)</label>
        <select id="bound_definition_id" name="bound_definition_id">
          <option value="">(aucun — élément décoratif, sans donnée)</option>
          {% for d in definitions %}
          <option value="{{ d.id }}">{{ d.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="actionsRow"><button type="submit" class="primary">+ Créer</button></div>
    </form>
  </div>

  <div class="colRight">
    <h2>Catalogue</h2>
    {% if types %}
    <div class="fieldsTableWrap">
      <table class="table is-fullwidth is-hoverable fieldsTable">
        <thead><tr><th>Nom</th><th>Usage</th><th></th></tr></thead>
        <tbody>
          {% for t in types %}
          <tr>
            <td>{{ t.icon }} {{ t.name }}</td>
            <td class="has-text-grey">
              {{ usage.get(t.id, 0) }} instance(s)
              {% if t.bound_definition_id %}
                {% for d in definitions %}{% if d.id == t.bound_definition_id %} · « {{ d.name }} »{% endif %}{% endfor %}
              {% endif %}
            </td>
            <td class="fieldsTableActions">
              <a class="button is-small" href="{{ url_for('screen_edit', slug=game.slug, screen_id=t.template_screen_id) }}" title="Modifier le contenu de cet élément de jeu">✏️</a>
              <form method="post" action="{{ url_for('element_type_delete', slug=game.slug, element_type_id=t.id) }}"
                    onsubmit="return confirm('Supprimer l\'élément de jeu « {{ t.name }} » du catalogue (et tout son contenu) ?');">
                <button type="submit" class="button is-small is-danger" {{ 'disabled title="Utilisé sur un écran — retire-le des écrans d\'abord"' if usage.get(t.id, 0) > 0 else '' }}>🗑️</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="hint">Aucun élément de jeu défini pour l'instant.</p>
    {% endif %}
  </div>
</div>
{% endblock %}