{% 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 %}
            <li class="breadcrumb-item"><a href="/members">Membres</a></li>
          {% else %}
            <li class="breadcrumb-item">
              <a href="/contacts">Sympathisants</a>
            </li>
          {% endif %}

          <li class="breadcrumb-item active">
            {{ Person.LastName }} {{ Person.FirstName }}
          </li>
        </ol>
      </nav>
      <hr />
    </div>

    <div class="mw-1200">
      <div class="row align-items-center mb-3">
        <div class="col-md-2 col-xl-3">Nom de famille</div>
        <div class="col">
          <input
            type="text"
            class="form-control"
            value="{{ Person.LastName }}"
            disabled
            readonly
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <div class="col-md-2 col-xl-3">Prénom</div>
        <div class="col">
          <input
            type="text"
            class="form-control"
            value="{{ Person.FirstName }}"
            disabled
            readonly
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <div class="col-md-2 col-xl-3">Email</div>
        <div class="col">
          <input
            type="text"
            class="form-control"
            value="{{ Person.Email }}"
            disabled
            readonly
          />
        </div>
      </div>

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

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

      <div class="row align-items-center mb-2">
        <div class="col-md-2 col-xl-3">Adresse</div>
        <div class="col">
          <input
            type="text"
            class="form-control"
            value="{{ Person.Address1 }}"
            disabled
            readonly
          />
        </div>
      </div>

      <div class="row align-items-center mb-2">
        <div class="col offset-md-2 offset-xl-3">
          <input
            type="text"
            class="form-control"
            value="{{ Person.Address2 }}"
            disabled
            readonly
          />
        </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
            type="text"
            class="form-control"
            value="{{ Person.PostalCode }}"
            disabled
            readonly
          />
        </div>
        <div class="col">
          <input
            type="text"
            class="form-control"
            value="{{ Person.City }}"
            disabled
            readonly
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <div class="col-md-2 col-xl-3">Section</div>
        <div class="col">
          <input
            type="text"
            class="form-control"
            value="{{ Person.Section.Name }}"
            disabled
            readonly
          />
        </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">
          <div class="col-md-2 col-xl-3">{{ Field.Name }}</div>
          <div class="col">
            {% if Field.FieldType == "text" %}
              <input
                type="text"
                class="form-control"
                disabled
                readonly
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ValueString.String }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}

            {% if Field.FieldType == "longtext" %}
              <textarea
                type="text"
                class="form-control"
                disabled
                readonly
                row
                align-items-centers="4"
              >
{% for FieldValue in FieldValues %}{% if FieldValue.FieldID == Field.ID %}{{ FieldValue.ValueString.String }}{% endif %}{% endfor %}</textarea
              >
            {% endif %}

            {% if Field.FieldType == "number" %}
              <input
                type="text"
                class="form-control"
                disabled
                readonly
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ValueInt.Int64 }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}

            {% if Field.FieldType == "date" %}
              <input
                type="text"
                class="form-control"
                disabled
                readonly
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ValueDate.Time|date:"02.01.2006" }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}

            {% if Field.FieldType == "list" and Field.List.Multi %}

              {% set count = 1 %}
              {% for FieldValue in FieldValues %}
                {% if FieldValue.FieldID == Field.ID %}
                  {% if FieldValue.FieldID == Field.ID %}
                    <div class="mb-1">
                      <input
                        type="checkbox"
                        class="form-check-input me-2"
                        checked
                        disabled
                      />
                      <label class="form-label"
                        >{{ FieldValue.ListItem.Value }}</label
                      >
                    </div>
                  {% endif %}
                {% endif %}
              {% endfor %}
            {% endif %}

            {% if Field.FieldType == "list" and !Field.List.Multi %}
              <input
                type="text"
                class="form-control"
                disabled
                readonly
                {% for FieldValue in FieldValues %}
                  {% if FieldValue.FieldID == Field.ID %}
                    value="{{ FieldValue.ListItem.Value }}"
                  {% endif %}
                {% endfor %}
              />
            {% endif %}
          </div>
        </div>
      {% endfor %}

      <div class="my-5">
        {% if Person.IsMember %}
          <div class="row align-items-center">
            <div class="col-md-6">
              {% if !Person.DeletedAt.Valid %}

                {% if PermEdit %}
                  <a
                    class="btn btn-outline-primary"
                    href="/members/{{ Person.ID }}/edit"
                  >
                    <i class="bi-pencil-square"></i>
                    Modifier
                  </a>
                {% endif %}

                {% if PermConvert %}
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-convert"
                  >
                    <i class="bi-arrow-repeat align-items-center-repeat"></i>
                    Convertir en sympathisant
                  </button>
                {% endif %}
              {% endif %}
            </div>
            <div class="col-md-6 text-md-end mt-2 mt-md-0">
              {% if Person.DeletedAt.Valid %}

                {% if PermRestore %}
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-restore"
                  >
                    <i class="bi-person-check"></i>
                    Restaurer
                  </button>
                {% endif %}
              {% else %}

                {% if PermArchive %}
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-archive"
                  >
                    <i class="bi-person-slash"></i>
                    Archiver
                  </button>
                {% endif %}
              {% endif %}

              {% if PermPurge %}
                <button
                  class="btn btn-outline-danger"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#modal-delete"
                >
                  <i class="bi-trash3"></i>
                  Supprimer
                </button>
              {% endif %}
            </div>
          </div>
        {% else %}
          <div class="row align-items-center">
            <div class="col-md-6">
              {% if !Person.DeletedAt.Valid %}

                {% if PermEdit %}
                  <a
                    class="btn btn-outline-primary"
                    href="/contacts/{{ Person.ID }}/edit"
                  >
                    <i class="bi-pencil-square"></i>
                    Modifier
                  </a>
                {% endif %}

                {% if PermConvert %}
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-convert"
                  >
                    <i class="bi-arrow-repeat align-items-center-repeat"></i>
                    Convertir en membre
                  </button>
                {% endif %}
              {% endif %}
            </div>
            <div class="col-md-6 text-md-end mt-2 mt-md-0">
              {% if Person.DeletedAt.Valid %}

                {% if PermRestore %}
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-restore"
                  >
                    <i class="bi-person-check"></i>
                    Restaurer
                  </button>
                {% endif %}
              {% else %}

                {% if PermArchive %}
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-archive"
                  >
                    <i class="bi-person-slash"></i>
                    Archiver
                  </button>
                {% endif %}
              {% endif %}

              {% if PermPurge %}
                <button
                  class="btn btn-outline-danger"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#modal-delete"
                >
                  <i class="bi-trash3"></i>
                  Supprimer
                </button>
              {% endif %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div id="modal-delete" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
          {% if Person.IsMember %}
            <p>Êtes-vous sûr de vouloir supprimer ce membre ?</p>
          {% else %}
            <p>Êtes-vous sûr de vouloir supprimer ce sympathisant ?</p>
          {% endif %}
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-secondary"
            data-bs-dismiss="modal"
          >
            <i class="bi-x-lg me-1"></i>
            Annuler
          </button>

          {% if Person.IsMember %}
            <form
              action="/members/{{ Person.ID }}/purge"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-danger" type="submit">
                <i class="bi-trash3 me-1"></i>
                Supprimer
              </button>
            </form>
          {% else %}
            <form
              action="/contacts/{{ Person.ID }}/purge"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-danger" type="submit">
                <i class="bi-trash3 me-1"></i>
                Supprimer
              </button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div id="modal-archive" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
          {% if Person.IsMember %}
            <p>Êtes-vous sûr de vouloir archiver ce membre ?</p>
          {% else %}
            <p>Êtes-vous sûr de vouloir archiver ce sympathisant ?</p>
          {% endif %}
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-secondary"
            data-bs-dismiss="modal"
          >
            <i class="bi-x-lg me-1"></i>
            Annuler
          </button>

          {% if Person.IsMember %}
            <form
              action="/members/{{ Person.ID }}/archive"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-primary" type="submit">
                <i class="bi-person-slash"></i>
                Archiver
              </button>
            </form>
          {% else %}
            <form
              action="/contacts/{{ Person.ID }}/archive"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-primary" type="submit">
                <i class="bi-person-slash"></i>
                Archiver
              </button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div id="modal-restore" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
          {% if Person.IsMember %}
            <p>Êtes-vous sûr de vouloir restaurer ce membre ?</p>
          {% else %}
            <p>Êtes-vous sûr de vouloir restaurer ce sympathisant ?</p>
          {% endif %}
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-secondary"
            data-bs-dismiss="modal"
          >
            <i class="bi-x-lg me-1"></i>
            Annuler
          </button>

          {% if Person.IsMember %}
            <form
              action="/members/{{ Person.ID }}/restore"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-primary" type="submit">
                <i class="bi-person-check"></i>
                Restaurer
              </button>
            </form>
          {% else %}
            <form
              action="/contacts/{{ Person.ID }}/restore"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-primary" type="submit">
                <i class="bi-person-check"></i>
                Restaurer
              </button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div id="modal-convert" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body">
          {% if Person.IsMember %}
            <p>
              Êtes-vous sûr de vouloir convertir ce membre en sympathisant ?
            </p>
          {% else %}
            <p>
              Êtes-vous sûr de vouloir convertir ce sympathisant en membre ?
            </p>
          {% endif %}
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-secondary"
            data-bs-dismiss="modal"
          >
            <i class="bi-x-lg me-1"></i>
            Annuler
          </button>

          {% if Person.IsMember %}
            <form
              action="/members/{{ Person.ID }}/convert"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-primary" type="submit">
                <i class="bi-arrow align-items-center-repeat"></i>
                Convertir
              </button>
            </form>
          {% else %}
            <form
              action="/contacts/{{ Person.ID }}/convert"
              method="post"
              class="d-inline p-0"
            >
              <button class="btn btn-outline-primary" type="submit">
                <i class="bi-arrow align-items-center-repeat"></i>
                Convertir
              </button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}