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

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

  <h3 class="title is-6">Champs</h3>
  <div id="fieldsList"></div>
  <button type="button" class="button is-outlined is-fullwidth mb-4" id="btnAddField">+ Ajouter un champ</button>

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

<template id="fieldRowTemplate">
  <div class="fieldRowCard box">
    <div class="columns">
      <div class="column">
        <div class="field">
          <label class="label">Nom du champ</label>
          <div class="control"><input class="input" type="text" name="field_name[]" placeholder="ex. nom, description, pv..." required></div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label class="label">Type</label>
          <div class="control">
            <div class="select is-fullwidth">
              <select name="field_type[]" class="fieldTypeSelect">
                {% for key, val in field_types.items() %}
                <option value="{{ key }}">{{ val.label }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="relationTarget field" style="display:none;">
      <label class="label">Objet lié</label>
      <div class="control">
        <div class="select is-fullwidth">
          <select name="field_relation[]">
            {% for d in existing_definitions %}
            <option value="{{ d.id }}">{{ d.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      {% if not existing_definitions %}
      <p class="help">Aucun autre objet défini.</p>
      {% endif %}
    </div>
    <div class="boundsTarget columns" style="display:none;">
      <div class="column">
        <div class="field">
          <label class="label">Valeur mini</label>
          <div class="control"><input class="input" type="number" step="any" name="field_min[]" placeholder="ex. 0"></div>
        </div>
      </div>
      <div class="column">
        <div class="field">
          <label class="label">Valeur maxi</label>
          <div class="control"><input class="input" type="number" step="any" name="field_max[]" placeholder="ex. 100"></div>
        </div>
      </div>
    </div>
    <div class="field">
      <label class="label">Obligatoire ?</label>
      <div class="control">
        <div class="select is-fullwidth">
          <select name="field_required[]">
            <option value="0">Non</option>
            <option value="1">Oui</option>
          </select>
        </div>
      </div>
    </div>
    <button type="button" class="button is-small is-danger btnRemoveField">🗑️ Retirer ce champ</button>
  </div>
</template>

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