{% extends "base.html" %}
{% block title %}Nouvel objet — {{ game.name }}{% endblock %}
{% block breadcrumb %}
<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
<span class="crumb-sep">/</span><span class="crumb">Nouvel objet</span>
{% endblock %}
{% block content %}
<h1>Définir un nouvel objet</h1>

<form method="post" class="card" id="objectForm">
  <label for="object_name">Nom de l'objet (ex. Personnage, Niveau, Question...)</label>
  <input type="text" id="object_name" name="object_name" required>

  <h3>Champs</h3>
  <div id="fieldsList"></div>
  <button type="button" class="addBtn" id="btnAddField">+ Ajouter un champ</button>

  <div class="actionsRow">
    <button type="submit" class="primary">Créer l'objet</button>
  </div>
</form>

<template id="fieldRowTemplate">
  <div class="fieldRowCard card">
    <div class="fieldRow">
      <div>
        <label>Nom du champ</label>
        <input type="text" name="field_name[]" placeholder="ex. nom, description, pv..." required>
      </div>
      <div>
        <label>Type</label>
        <select name="field_type[]" class="fieldTypeSelect">
          {% for key, val in field_types.items() %}
          <option value="{{ key }}">{{ val.label }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="relationTarget" style="display:none;">
      <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.</p>
      {% endif %}
    </div>
    <div class="boundsTarget fieldRow" style="display:none;">
      <div>
        <label>Valeur mini</label>
        <input type="number" step="any" name="field_min[]" placeholder="ex. 0">
      </div>
      <div>
        <label>Valeur maxi</label>
        <input type="number" step="any" name="field_max[]" placeholder="ex. 100">
      </div>
    </div>
    <div>
      <label>Obligatoire ?</label>
      <select name="field_required[]">
        <option value="0">Non</option>
        <option value="1">Oui</option>
      </select>
    </div>
    <button type="button" class="smallBtn danger btnRemoveField">🗑️ Retirer ce champ</button>
  </div>
</template>

<script src="{{ url_for('static', filename='object_form.js') }}"></script>
{% endblock %}