{% extends "base.html" %}
{% block title %}Modifier {{ definition.name }} — {{ game.name }}{% endblock %}
{% block content_class %}content-wide{% endblock %}
{% block breadcrumb %}
<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
<span class="crumb-sep">/</span>
<a class="crumb" href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">{{ definition.name }}</a>
<span class="crumb-sep">/</span><span class="crumb">Modifier</span>
{% endblock %}
{% block content %}
<h1>Modifier l'objet « {{ definition.name }} »</h1>
<p class="hint">Table SQL : {{ definition.table_name }}</p>

<form method="post" class="card fieldRow" style="align-items:flex-end;">
  <div>
    <label for="object_name">Nom de l'objet</label>
    <input type="text" id="object_name" name="object_name" value="{{ definition.name }}" required>
  </div>
  <button type="submit">Renommer</button>
</form>

<div class="twoCol">
  <!-- Colonne de gauche : ajouter un champ + supprimer l'objet -->
  <div class="colLeft">
    <h2>Ajouter un champ</h2>
    <form method="post" action="{{ url_for('object_field_add', slug=game.slug, definition_id=definition.id) }}" class="card" id="addFieldForm">
      <label>Nom du champ</label>
      <input type="text" name="field_name" placeholder="ex. nom, description, pv..." required>

      <label>Type</label>
      <select name="field_type" id="newFieldType">
        {% for key, val in field_types.items() %}
        <option value="{{ key }}">{{ val.label }}</option>
        {% endfor %}
      </select>

      <div id="newFieldRelationWrap" style="display:none; margin-top:8px;">
        <label>Objet lié</label>
        <select name="field_relation">
          {% for d in existing_definitions %}
          <option value="{{ d.id }}">{{ d.name }}</option>
          {% endfor %}
        </select>
        {% if not existing_definitions %}
        <p class="hint">Aucun autre objet défini dans ce jeu pour l'instant.</p>
        {% endif %}
      </div>

      <div id="newFieldBoundsWrap" class="fieldRow" style="display:none; margin-top:8px;">
        <div>
          <label>Valeur mini (optionnel)</label>
          <input type="number" step="any" name="field_min" placeholder="ex. 0">
        </div>
        <div>
          <label>Valeur maxi (optionnel)</label>
          <input type="number" step="any" name="field_max" placeholder="ex. 100">
        </div>
      </div>

      <label>Obligatoire ?</label>
      <select name="field_required">
        <option value="0">Non</option>
        <option value="1">Oui</option>
      </select>

      <div class="actionsRow">
        <button type="submit" class="primary">+ Ajouter ce champ</button>
      </div>
    </form>

    <div class="dangerZone">
      <h3>Supprimer cet objet</h3>
      <form method="post" action="{{ url_for('object_delete', slug=game.slug, definition_id=definition.id) }}"
            onsubmit="return confirm('Supprimer définitivement l\'objet « {{ definition.name }} », sa table et toutes ses données ? Cette action est irréversible.');">
        <button type="submit" class="danger">🗑️ Supprimer l'objet « {{ definition.name }} »</button>
      </form>
    </div>
  </div>

  <!-- Colonne de droite : champs existants, chacun modifiable -->
  <div class="colRight">
    <h2>Champs existants</h2>
    {% if definition.fields %}
    {% for f in definition.fields %}
    <div class="card fieldEditCard">
      <form method="post" action="{{ url_for('object_field_edit', slug=game.slug, definition_id=definition.id, field_id=f.id) }}">
        <div class="fieldRow">
          <div>
            <label>Nom du champ</label>
            <input type="text" name="field_name" value="{{ f.name }}" required>
          </div>
          <div>
            <label>Type</label>
            <input type="text" value="{{ field_types.get(f.type, {}).get('label', f.type) }}" disabled>
          </div>
        </div>
        {% if f.type == 'relation' %}
        <label>Objet lié</label>
        <select name="field_relation">
          {% for d in existing_definitions %}
          <option value="{{ d.id }}" {{ 'selected' if d.id == f.relation_definition_id else '' }}>{{ d.name }}</option>
          {% endfor %}
        </select>
        {% endif %}
        {% if f.type in ('nombre_entier', 'nombre_decimal') %}
        <div class="fieldRow">
          <div>
            <label>Valeur mini (bornage automatique)</label>
            <input type="number" step="any" name="field_min" value="{{ f.min_value if f.min_value is not none else '' }}" placeholder="ex. 0">
          </div>
          <div>
            <label>Valeur maxi (bornage automatique)</label>
            <input type="number" step="any" name="field_max" value="{{ f.max_value if f.max_value is not none else '' }}" placeholder="ex. 100">
          </div>
        </div>
        <p class="hint">Laisser vide = pas de limite. S'applique à "Donner cette valeur", "Augmenter de..." et "Diminuer de..." dans le graphe de logique.</p>
        {% endif %}
        <label>Obligatoire ?</label>
        <select name="field_required">
          <option value="0" {{ 'selected' if not f.required else '' }}>Non</option>
          <option value="1" {{ 'selected' if f.required else '' }}>Oui</option>
        </select>
        <div class="actionsRow fieldEditActions">
          <button type="submit">Enregistrer</button>
        </div>
      </form>
      <form method="post" action="{{ url_for('object_field_delete', slug=game.slug, definition_id=definition.id, field_id=f.id) }}"
            onsubmit="return confirm('Retirer le champ « {{ f.name }} » ? Les données déjà enregistrées dans ce champ seront perdues.');">
        <button type="submit" class="smallBtn danger">🗑️ Retirer ce champ</button>
      </form>
    </div>
    {% endfor %}
    {% else %}
    <p class="hint">Aucun champ pour l'instant.</p>
    {% endif %}
  </div>
</div>

<script>
  (function(){
    var sel = document.getElementById('newFieldType');
    var relWrap = document.getElementById('newFieldRelationWrap');
    var boundsWrap = document.getElementById('newFieldBoundsWrap');
    var NUMERIC_TYPES = ['nombre_entier', 'nombre_decimal'];
    function sync(){
      relWrap.style.display = sel.value === 'relation' ? 'block' : 'none';
      boundsWrap.style.display = NUMERIC_TYPES.indexOf(sel.value) !== -1 ? 'flex' : 'none';
    }
    sel.addEventListener('change', sync);
    sync();
  })();
</script>
{% endblock %}