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

{% block main %}
  <div class="container-fluid my-4 px-4">
    <div class="mb-4">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Accueil</a></li>

          {% if Person.IsMember or MembersPage %}
            <li class="breadcrumb-item"><a href="/members">Membres</a></li>
          {% else %}
            <li class="breadcrumb-item"><a href="/contacts">Contacts</a></li>
          {% endif %}

          {% if Person.ID %}
            {% if Person.IsMember %}
              <li class="breadcrumb-item">
                <a href="/admin/members/{{ Person.ID }}">
                  {{ Person.LastName }} {{ Person.FirstName }}
                </a>
              </li>
            {% else %}
              <li class="breadcrumb-item">
                <a href="/admin/contacts/{{ Person.ID }}">
                  {{ Person.LastName }} {{ Person.FirstName }}
                </a>
              </li>
            {% endif %}

            <li class="breadcrumb-item active">Modifier</li>
          {% else %}
            <li class="breadcrumb-item active">Ajouter</li>
          {% endif %}
        </ol>
      </nav>
      <hr />
    </div>

    <form id="person" method="post" class="mw-1200">
      {% if Errors %}
        <div class="alert alert-danger">
          <ul class="m-0">
            {% for Error in Errors %}
              <li>{{ Error }}</li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      <div class="row align-items-center mb-3">
        <label for="last_name" class="form-label col-md-2 col-xl-3">
          Nom de famille
        </label>
        <div class="col">
          <input
            id="name"
            class="form-control"
            type="text"
            name="last_name"
            value="{{ Person.LastName }}"
            autofocus
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <label for="first_name" class="form-label col-md-2 col-xl-3">
          Prénom
        </label>
        <div class="col">
          <input
            id="first_name"
            class="form-control"
            type="text"
            name="first_name"
            required
            value="{{ Person.FirstName }}"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <label for="email" class="form-label col-md-2 col-xl-3"> Email </label>
        <div class="col">
          <input
            id="email"
            class="form-control"
            type="text"
            name="email"
            value="{{ Person.Email }}"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <label for="phone" class="form-label col-md-2 col-xl-3">
          Téléphone fixe
        </label>
        <div class="col">
          <input
            id="phone"
            class="form-control"
            type="text"
            name="phone"
            value="{{ Person.Phone }}"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-5">
        <label for="mobile" class="form-label col-md-2 col-xl-3">
          Téléphone mobile
        </label>
        <div class="col">
          <input
            id="mobile"
            class="form-control"
            type="text"
            name="mobile"
            value="{{ Person.Mobile }}"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-2">
        <label for="address1" class="form-label col-md-2 col-xl-3">
          Adresse
        </label>
        <div class="col">
          <input
            id="address1"
            class="form-control"
            type="text"
            name="address1"
            value="{{ Person.Address1 }}"
            placeholder="Ligne 1"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-2">
        <div class="col offset-md-2 offset-xl-3">
          <input
            id="address2"
            class="form-control"
            type="text"
            name="address2"
            value="{{ Person.Address2 }}"
            placeholder="Ligne 2"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-5">
        <div class="col-md-3 col-lg-2 offset-md-2 offset-xl-3 mb-2 mb-md-0">
          <input
            id="postal_code"
            class="form-control"
            type="text"
            name="postal_code"
            placeholder="Code postal"
            pattern="[0-9]{4}"
            value="{{ Person.PostalCode }}"
            autocomplete="off"
          />
        </div>
        <div class="col">
          <input
            id="city"
            class="form-control"
            type="text"
            name="city"
            value="{{ Person.City }}"
            placeholder="Lieu"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <label for="section" class="form-label col-md-2 col-xl-3">
          Section
        </label>
        <div class="col">
          <select
            class="form-select"
            name="section"
            id="section"
            required
            autocomplete="off"
          >
            {% for Section in Sections %}
              <option
                value="{{ Section.ID }}"
                {% if Section.ID == Person.SectionID %}
                  selected
                {% endif %}
              >
                {{ Section.Name }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div>

      {% if Fields %}
        <div class="mt-4 mb-3">
          <span class="h4"> Champs supplémentaires </span>
        </div>
      {% endif %}

      {% for Field in Fields %}
        <div class="row align-items-center mb-3">
          <label
            for="field-{{ Field.ID }}"
            class="form-label col-md-2 col-xl-3"
          >
            {{ Field.Name }}
          </label>
          <div class="col">
            {% if Field.FieldType == "text" %}
              <input
                id="field-{{ Field.ID }}"
                class="form-control"
                type="text"
                name="field-{{ Field.ID }}"
                autocomplete="off"
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ValueString.String }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}

            {% if Field.FieldType == "longtext" %}
              <textarea
                id="field-{{ Field.ID }}"
                class="form-control"
                name="field-{{ Field.ID }}"
                row
                align-items-centers="4"
                autocomplete="off"
              >
{% for FieldValue in FieldValues %}{% if FieldValue.FieldID == Field.ID %}{{ FieldValue.ValueString.String }}{% endif %}{% endfor %}</textarea
              >
            {% endif %}

            {% if Field.FieldType == "number" %}
              <input
                id="field-{{ Field.ID }}"
                class="form-control"
                type="number"
                name="field-{{ Field.ID }}"
                autocomplete="off"
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ValueInt.Int64 }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}

            {% if Field.FieldType == "date" %}
              <input
                id="field-{{ Field.ID }}"
                class="form-control"
                type="date"
                name="field-{{ Field.ID }}"
                autocomplete="off"
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ValueDate.Time|date:"2006-01-02" }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}

            {% if Field.FieldType == "list" and !Field.List.Multi %}
              <select
                id="field-{{ Field.ID }}"
                class="form-select"
                name="field-{{ Field.ID }}"
                autocomplete="off"
              >
                <option value="0">Choisir...</option>
                {% for ListItem in Field.List.ListItems %}
                  <option
                    value="{{ ListItem.ID }}"
                    {% if !Person.ID and ListItem.Default %}
                      selected
                    {% endif %}

                    {% for FieldValue in FieldValues %}
                      {% if FieldValue.FieldID == Field.ID and FieldValue.ListItemID == ListItem.ID %}
                        selected
                      {% endif %}
                    {% endfor %}
                  >
                    {{ ListItem.Value }}
                  </option>
                {% endfor %}
              </select>
            {% endif %}

            {% if Field.FieldType == "list" and Field.List.Multi %}
              {% for ListItem in Field.List.ListItems %}
                <div class="mb-1">
                  <input
                    type="checkbox"
                    class="form-check-input me-2"
                    id="field-{{ Field.ID }}-{{ ListItem.ID }}"
                    name="field-{{ Field.ID }}-{{ ListItem.ID }}"
                    autocomplete="off"
                    {% if !Person.ID and ListItem.Default %}
                      checked
                    {% endif %}

                    {% for FieldValue in FieldValues %}
                      {% if FieldValue.FieldID == Field.ID and FieldValue.ListItemID == ListItem.ID %}
                        checked
                      {% endif %}
                    {% endfor %}
                  />
                  <label
                    for="field-{{ Field.ID }}-{{ ListItem.ID }}"
                    class="form-label"
                  >
                    {{ ListItem.Value }}
                  </label>
                </div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      {% endfor %}

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