{% extends "base.html" %}
{% block title %}Nouvel objet — {{ 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>Nouvel objet</a></li>
{% endblock %}
{% block content %}
<h1 class="title">Définir un nouvel objet</h1>

<form method="post" id="objectForm" class="formPassthrough">
<div class="twoCol">
  <div class="colLeft">
    <h2>Objet</h2>
    <div class="card">
      <div class="formField">
        <label for="object_name">Nom de l'objet (ex. Personnage, Niveau, Question...)</label>
        <input type="text" id="object_name" name="object_name" required>
      </div>
      <div class="actionsRow"><button type="submit" class="primary">Créer l'objet</button></div>
    </div>
  </div>

  <div class="colRight">
    <h2>Champs</h2>
    <button type="button" class="button is-outlined is-fullwidth mb-2" id="btnAddField">+ Ajouter un champ</button>
    <div class="fieldsTableWrap" style="padding:10px;">
      <div id="fieldsList"></div>
    </div>
  </div>
</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 %}