{% extends "layouts/main.html" %}

{% block main %}
  <div class="container mt-4">
    <div class="mb-4">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Accueil</a></li>
          <li class="breadcrumb-item"><a href="/admin">Administration</a></li>
          <li class="breadcrumb-item">
            <a href="/admin/fields">Champs supplémentaires</a>
          </li>

          {% if Field.ID %}
            <li class="breadcrumb-item">
              <a href="/admin/fields/{{ Field.ID }}">{{ Field.Name }}</a>
            </li>
            <li class="breadcrumb-item active">Modifier</li>
          {% else %}
            <li class="breadcrumb-item active">Ajouter</li>
          {% endif %}
        </ol>
      </nav>
      <hr />
    </div>

    {% if Errors %}
      <div class="alert alert-danger">
        <ul class="m-0">
          {% for Error in Errors %}
            <li>{{ Error }}</li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}

    <form id="field" method="post">
      <div class="row mb-3">
        <label for="name" class="form-label col-md-2"> Nom du champ </label>
        <div class="col-md-10">
          <input
            id="name"
            class="form-control"
            type="text"
            name="name"
            required
            value="{{ Field.Name }}"
            autocomplete="off"
            autofocus
          />
        </div>
      </div>

      {% if !Field.ID %}
        <div class="row mb-3">
          <label for="person_type" class="form-label col-md-2">
            Population
          </label>
          <div class="col-md-10">
            <select
              name="person_type"
              id="person_type"
              class="form-select"
              autocomplete="off"
              required
            >
              <option value="member">Membre</option>
              <option value="contact">Contact</option>
            </select>
          </div>
        </div>

        <div class="row mb-3">
          <label for="field_type" class="form-label col-md-2">
            Type de champ
          </label>
          <div class="col-md-10">
            <select
              name="field_type"
              id="field_type"
              class="form-select"
              autocomplete="off"
              required
            >
              <option value="text">Texte</option>
              <option value="longtext">Texte multiligne</option>
              <option value="number">Nombre</option>
              <option value="date">Date</option>
              <option value="list">Liste</option>
            </select>
          </div>
        </div>

        <div class="row mb-3">
          <label for="list" class="form-label col-md-2"> Liste </label>
          <div class="col-md-10">
            <select
              name="list"
              id="list"
              class="form-select"
              autocomplete="off"
              required
            >
              {% for List in Lists %}
                <option value="{{ List.ID }}">{{ List.Name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}

      <div class="my-4">
        <button class="btn btn-outline-primary" type="submit">
          <i class="me-1 bi-floppy"></i>
          Enregistrer
        </button>
      </div>
    </form>
  </div>
{% endblock %}