{% extends "base.html" %}
{% block title %}Éléments de jeu — {{ 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>Éléments de jeu</a></li>
{% 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>

<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>

<h2>Catalogue</h2>
<div class="scrollArea">
{% 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>
{% endblock %}