{% extends "base.html" %}
{% block title %}Éléments de jeu — {{ game.name }}{% 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="help mb-4">Un élément de jeu est un conteneur réutilisable.</p>

<form method="post" class="box">
  <div class="columns">
    <div class="column is-narrow" style="width:100px;">
      <div class="field">
        <label class="label" for="icon">Icône</label>
        <div class="control"><input class="input" type="text" id="icon" name="icon" value="🧩" maxlength="4"></div>
      </div>
    </div>
    <div class="column">
      <div class="field">
        <label class="label" for="name">Nom</label>
        <div class="control"><input class="input" type="text" id="name" name="name" placeholder="ex. Personnage, Outil, Carte mail..." required></div>
      </div>
    </div>
  </div>
  <div class="field">
    <label class="label" for="bound_definition_id">Objet lié (optionnel)</label>
    <div class="control">
      <div class="select is-fullwidth">
        <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>
  </div>
  <div class="field"><button type="submit" class="button is-primary">+ Créer</button></div>
</form>

<h2 class="subtitle">Catalogue</h2>
{% if types %}
<div class="table-container">
<table class="table is-fullwidth is-hoverable">
  <tbody>
  {% for t in types %}
  <tr>
    <td class="is-vcentered">
      <span class="has-text-weight-semibold">{{ t.icon }} {{ t.name }}</span>
      <br>
      <span class="is-size-7 has-text-grey">
        {{ usage.get(t.id, 0) }} instance(s) posée(s) sur des écrans
        {% if t.bound_definition_id %}
          {% for d in definitions %}{% if d.id == t.bound_definition_id %} · lié à l'objet « {{ d.name }} »{% endif %}{% endfor %}
        {% endif %}
      </span>
    </td>
    <td class="is-vcentered has-text-right">
      <div class="buttons is-inline-flex are-small">
        <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">✏️ Modifier le contenu</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>
      </div>
    </td>
  </tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% else %}
<p class="help">Aucun élément de jeu défini pour l'instant.</p>
{% endif %}
{% endblock %}