{% extends "base.html" %}
{% block title %}{{ definition.name }} — {{ game.name }}{% endblock %}
{% block content_class %}content-wide content-objectEdit{% endblock %}
{% block body_class %}objectEditBody{% endblock %}
{% block breadcrumb %}
<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
<li class="is-active"><a>{{ definition.name }}</a></li>
{% endblock %}
{% block content %}
<h1 class="title">{{ definition.name }}
  <a class="button is-small" href="{{ url_for('object_edit', slug=game.slug, definition_id=definition.id) }}" title="Modifier cet objet">✏️</a>
</h1>
<p class="hint mb-4">Table SQL : {{ definition.table_name }} — {{ definition.fields|length }} champ(s)</p>

{% if referenced_by %}
<div class="warningBanner">
  ⚠️ D'autres objets ont une relation vers « {{ definition.name }} » :
  {{ referenced_by|map(attribute='name')|join(', ') }}.
  La suppression de cet objet est bloquée tant que ces relations existent.
</div>
{% endif %}

{% if blocked_row_id %}
<div class="warningBanner">
  ⚠️ Impossible de supprimer l'entrée #{{ blocked_row_id }} : elle est référencée par
  {% for ref in blocked_row_refs %}{{ ref.count }} entrée(s) de « {{ ref.definition_name }} » (champ « {{ ref.field_name }} »){% if not loop.last %}, {% endif %}{% endfor %}.
  Modifie ou supprime d'abord ces entrées.
</div>
{% endif %}

<div class="twoCol">
  <div class="colLeft">
    <h2>Ajouter</h2>
    <div class="card">
      <p class="hint">Une entrée, c'est une ligne de la table SQL « {{ definition.table_name }} ».</p>
      <div class="actionsRow">
        <a class="button is-primary is-outlined is-fullwidth" href="{{ url_for('data_new', slug=game.slug, definition_id=definition.id) }}">+ Ajouter une entrée</a>
      </div>
    </div>
  </div>

  <div class="colRight">
    <h2>Données enregistrées</h2>
    {% if rows %}
    {% macro row_field_display(f, r) %}
    {%- if f.type == 'relation' -%}
    {{ relation_labels.get(f.id, {}).get(r[(f.name|colname) ~ '_id'], '—') }}
    {%- elif f.type == 'booleen' -%}
    {{ 'Oui' if r[f.name|colname] else 'Non' }}
    {%- else -%}
    {{ r[f.name|colname] }}
    {%- endif -%}
    {% endmacro %}
    <div class="fieldsTableWrap">
    <table class="table is-fullwidth is-hoverable dataTable fieldsTable">
      <thead>
        <tr>
          <th>#</th>
          {% for f in definition.fields %}<th>{{ f.name }}</th>{% endfor %}
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td>{{ r.id }}</td>
          {% for f in definition.fields %}
          <td>{{ row_field_display(f, r) }}</td>
          {% endfor %}
          <td>
            <div class="buttons is-inline-flex are-small">
              <button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
              <a class="button is-small" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
              <form method="post" action="{{ url_for('data_delete', slug=game.slug, definition_id=definition.id, row_id=r.id) }}"
                    onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');">
                <button type="submit" class="button is-small is-danger">🗑️</button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>

    {% for r in rows %}
    <div class="modal" id="rowDetail{{ r.id }}">
      <div class="modal-background" onclick="closeRowDetail({{ r.id }})"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Entrée #{{ r.id }}</p>
          <button class="delete" aria-label="Fermer" onclick="closeRowDetail({{ r.id }})"></button>
        </header>
        <section class="modal-card-body">
          {% for f in definition.fields %}
          <div class="rowDetailField">
            <div class="rowDetailLabel">{{ f.name }}</div>
            <div class="rowDetailValue">{{ row_field_display(f, r) }}</div>
          </div>
          {% endfor %}
        </section>
      </div>
    </div>
    {% endfor %}
    {% else %}
    <p class="hint">Aucune donnée enregistrée pour l'instant.</p>
    {% endif %}
  </div>
</div>

<script>
function openRowDetail(id) {
  var modal = document.getElementById('rowDetail' + id);
  if (modal) modal.classList.add('is-active');
}
function closeRowDetail(id) {
  var modal = document.getElementById('rowDetail' + id);
  if (modal) modal.classList.remove('is-active');
}
if (!window.__forgeRowDetailEscBound) {
  window.__forgeRowDetailEscBound = true;
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.modal.is-active').forEach(function (m) { m.classList.remove('is-active'); });
  });
}
</script>
{% endblock %}