{% 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 MembersPage %}
            <li class="breadcrumb-item active">Membres</li>
          {% else %}
            <li class="breadcrumb-item active">Sympathisants</li>
          {% endif %}
        </ol>
      </nav>
      <hr />
    </div>

    <div class="row my-3">
      <div class="col-sm-6">
        {% if MembersPage %}
          <span class="h2 d-none d-sm-inline">Membres</span>
        {% else %}
          <span class="h2 d-none d-sm-inline">Sympathisants</span>
        {% endif %}
      </div>
      <div class="col-sm-6 text-end">
        {% if MembersPage %}
          <div class="btn-group">
            <a class="btn btn-outline-primary" href="/members/add">
              <i class="bi-plus-lg"></i>
              Ajouter
            </a>
            <a
              class="btn btn-outline-primary"
              href="/members/export?s={{ SearchJSON|urlencode }}"
            >
              <i class="bi-filetype-csv"></i>
              Exporter
            </a>
          </div>
        {% else %}
          <div class="btn-group">
            <a class="btn btn-outline-primary" href="/contacts/add">
              <i class="bi-plus-lg"></i>
              Ajouter
            </a>
            <a
              class="btn btn-outline-primary"
              href="/contacts/export?s={{ SearchJSON|urlencode }}"
            >
              <i class="bi-filetype-csv"></i>
              Exporter
            </a>
          </div>
        {% endif %}
      </div>
    </div>

    <div id="search-container" class="h-100 p-4 mb-3 bg-body-tertiary border">
      <div class="row">
        <div class="col-lg-6 mb-3">
          <label for="name" class="form-label">Nom et prénom</label>
          <input
            type="text"
            class="form-control"
            id="name"
            data-search-field="name"
            data-search-advanced="false"
            name="name"
          />
        </div>
        <div class="col-sm-6 col-lg-3 mb-3">
          <label for="section" class="form-label">Section</label>
          <select
            class="form-select"
            id="section"
            data-search-field="section"
            data-search-type="int"
            data-search-advanced="false"
            name="section"
          >
            <option value=""></option>
            {% for Section in Sections %}
              <option value="{{ Section.ID }}">{{ Section.Name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3 pt-3">
          {% if PermShow %}
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                data-search-field="active"
                data-search-advanced="false"
                id="active"
                checked
              />
              {% if MembersPage %}
                <label class="form-check-label" for="active"
                  >Afficher membres actifs</label
                >
              {% else %}
                <label class="form-check-label" for="active"
                  >Afficher sympathisants actifs</label
                >
              {% endif %}
            </div>
          {% endif %}

          {% if PermShowArchived %}
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                data-search-field="archive"
                data-search-advanced="false"
                id="archive"
              />
              {% if MembersPage %}
                <label class="form-check-label" for="archive"
                  >Afficher membres archivés</label
                >
              {% else %}
                <label class="form-check-label" for="archive"
                  >Afficher sympathisants archivés</label
                >
              {% endif %}
            </div>
          {% endif %}
        </div>
      </div>

      <div class="d-none" id="advanced-section">
        <div class="row">
          <div class="col-lg-6 mb-3">
            <label for="email" class="form-label">Email</label>
            <input
              type="text"
              class="form-control"
              id="email"
              data-search-field="email"
              data-search-advanced="true"
              name="email"
            />
          </div>
          <div class="col-lg-6 mb-3">
            <label for="phone" class="form-label">Téléphone</label>
            <input
              type="text"
              class="form-control"
              id="phone"
              data-search-field="phone"
              data-search-advanced="true"
              name="phone"
            />
          </div>
          <div class="col-lg-6 mb-3">
            <label for="address" class="form-label">Adresse</label>
            <input
              type="text"
              class="form-control"
              id="address"
              data-search-field="address"
              data-search-advanced="true"
              name="address"
            />
          </div>
          <div class="col-sm-4 col-lg-2 mb-3">
            <label for="postal_code" class="form-label">Code postal</label>
            <input
              type="text"
              class="form-control"
              id="postal_code"
              data-search-field="postal_code"
              data-search-advanced="true"
              name="postal_code"
            />
          </div>
          <div class="col-sm-8 col-lg-4 mb-3">
            <label for="city" class="form-label">Lieu</label>
            <input
              type="text"
              class="form-control"
              id="city"
              data-search-field="city"
              data-search-advanced="true"
              name="city"
            />
          </div>
        </div>

        <div id="search-fields-model" class="row d-none">
          <div class="start-col col-lg-6 mb-3">
            <label class="form-label">Champ supplémentaire</label>
            <select class="form-select field-select" data-last-field="">
              <option value=""></option>
              {% for Field in Fields %}
                <option value="{{ Field.ID }}">{{ Field.Name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="end-col col-lg-6 mb-3">
            <label class="form-label">Valeur</label>
            <input type="text" class="form-control" disabled />
          </div>
        </div>

        <div id="search-fields" class="mb-3"></div>
      </div>

      <div class="row mt-2">
        <div class="col-12 col-sm-8 col-md-6 d-grid d-sm-block">
          <button
            class="btn btn-outline-primary"
            id="advanced"
            data-state="false"
            type="button"
          >
            <i class="bi-arrow-down me-1"></i> Avancé
          </button>
          <button
            class="btn btn-outline-primary"
            id="reset-search"
            type="button"
          >
            <i class="bi-arrow-clockwise me-1"></i> Réinitialiser
          </button>
        </div>
        <div class="col-12 col-sm-4 col-md-6 text-end d-grid d-sm-block">
          <button class="btn btn-outline-success" id="search" type="button">
            <i class="bi-search me-1"></i> Recherche
          </button>
        </div>
      </div>

      <form id="search-form" method="get" class="d-none">
        <input
          type="hidden"
          id="search-page"
          name="p"
          value="{{ Pagination.CurrentPage }}"
        />
        <input
          type="hidden"
          id="search-json"
          name="s"
          value="{{ SearchJSON }}"
        />
      </form>
    </div>

    <div>
      <div class="card card-body my-2 py-2 bg-body-tertiary">
        <div class="row">
          <div
            class="col-xxl col-lg-4 col-md-6 order-1 order-md-1 order-lg-1 order-xxl-1"
          >
            <div class="text-bold fs-7 mt-xxl-0 mt-2">
              {% if OrderCol == "name" || OrderCol == "" %}
                {% if OrderDir == "asc" || OrderDir == "" %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=name&o=desc">
                    Nom <i class="bi-arrow-down"></i>
                  </a>
                {% else %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=name&o=asc">
                    Nom <i class="bi-arrow-up"></i>
                  </a>
                {% endif %}
              {% else %}
                <a href="?p=1&s={{ SearchJSON|urlencode }}&c=name&o=asc">
                  Nom
                </a>
              {% endif %}
            </div>
          </div>
          <div
            class="col-xxl col-lg-4 col-md-6 order-2 order-md-3 order-lg-2 order-xxl-2"
          >
            <div class="text-bold fs-7 mt-xxl-0 mt-2">
              {% if OrderCol == "address" %}
                {% if OrderDir == "asc" || OrderDir == "" %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=address&o=desc">
                    Adresse <i class="bi-arrow-down"></i>
                  </a>
                {% else %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=address&o=asc">
                    Adresse <i class="bi-arrow-up"></i>
                  </a>
                {% endif %}
              {% else %}
                <a href="?p=1&s={{ SearchJSON|urlencode }}&c=address&o=asc">
                  Adresse
                </a>
              {% endif %}
            </div>
          </div>
          <div
            class="col-xxl col-lg-4 col-md-6 order-3 order-md-5 order-lg-5 order-xxl-3"
          >
            <div class="text-bold fs-7 mt-xxl-0 mt-2">
              {% if OrderCol == "npa" %}
                {% if OrderDir == "asc" || OrderDir == "" %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=npa&o=desc">
                    Lieu <i class="bi-arrow-down"></i>
                  </a>
                {% else %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=npa&o=asc">
                    Lieu <i class="bi-arrow-up"></i>
                  </a>
                {% endif %}
              {% else %}
                <a href="?p=1&s={{ SearchJSON|urlencode }}&c=npa&o=asc">
                  Lieu
                </a>
              {% endif %}
            </div>
          </div>
          <div
            class="col-xxl col-lg-4 col-md-6 order-4 order-md-2 order-lg-4 order-xxl-4"
          >
            <div class="text-bold fs-7 mt-xxl-0 mt-2">
              {% if OrderCol == "section" %}
                {% if OrderDir == "asc" || OrderDir == "" %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=section&o=desc">
                    Section <i class="bi-arrow-down"></i>
                  </a>
                {% else %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=section&o=asc">
                    Section <i class="bi-arrow-up"></i>
                  </a>
                {% endif %}
              {% else %}
                <a href="?p=1&s={{ SearchJSON|urlencode }}&c=section&o=asc">
                  Section
                </a>
              {% endif %}
            </div>
          </div>
          <div
            class="col-xxl col-lg-4 col-md-6 order-5 order-md-3 order-lg-4 order-xxl-5"
          >
            <div class="text-bold fs-7 mt-xxl-0 mt-2">
              {% if OrderCol == "created" %}
                {% if OrderDir == "asc" || OrderDir == "" %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=created&o=desc">
                    Création <i class="bi-arrow-down"></i>
                  </a>
                {% else %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=created&o=asc">
                    Création <i class="bi-arrow-up"></i>
                  </a>
                {% endif %}
              {% else %}
                <a href="?p=1&s={{ SearchJSON|urlencode }}&c=created&o=asc">
                  Création
                </a>
              {% endif %}
            </div>
          </div>
          <div
            class="col-xxl col-lg-4 col-md-6 order-last order-md-last order-lg-last order-xxl-last"
          >
            <div class="text-bold fs-7 mt-xxl-0 mt-2">
              {% if OrderCol == "updated" %}
                {% if OrderDir == "asc" || OrderDir == "" %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=updated&o=desc">
                    Modification <i class="bi-arrow-down"></i>
                  </a>
                {% else %}
                  <a href="?p=1&s={{ SearchJSON|urlencode }}&c=updated&o=asc">
                    Modification <i class="bi-arrow-up"></i>
                  </a>
                {% endif %}
              {% else %}
                <a href="?p=1&s={{ SearchJSON|urlencode }}&c=updated&o=asc">
                  Modification
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      {% for Person in People %}
        <div class="card card-body my-2 py-2 bg-body-tertiary">
          <div class="row">
            <div
              class="col-xxl col-lg-4 col-md-6 order-1 order-md-1 order-lg-1 order-xxl-1"
            >
              <div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
              <div>
                {% if Person.IsMember %}
                  <a href="/members/{{ Person.ID }}">
                    {{ Person.LastName }} {{ Person.FirstName }}
                  </a>
                {% else %}
                  <a href="/contacts/{{ Person.ID }}">
                    {{ Person.LastName }} {{ Person.FirstName }}
                  </a>
                {% endif %}
              </div>
            </div>
            <div
              class="col-xxl col-lg-4 col-md-6 order-2 order-md-3 order-lg-2 order-xxl-2"
            >
              <div class="text-bold fs-7 mt-xxl-0 mt-2">Adresse</div>
              <div>{{ Person.Address1 }}</div>
            </div>
            <div
              class="col-xxl col-lg-4 col-md-6 order-3 order-md-5 order-lg-5 order-xxl-3"
            >
              <div class="text-bold fs-7 mt-xxl-0 mt-2">Lieu</div>
              <div>{{ Person.PostalCode }} {{ Person.City }}</div>
            </div>
            <div
              class="col-xxl col-lg-4 col-md-6 order-4 order-md-2 order-lg-4 order-xxl-4"
            >
              <div class="text-bold fs-7 mt-xxl-0 mt-2">Section</div>
              <div>{{ Person.Section.Name }}</div>
            </div>
            <div
              class="col-xxl col-lg-4 col-md-6 order-5 order-md-3 order-lg-4 order-xxl-5"
            >
              <div class="text-bold fs-7 mt-xxl-0 mt-2">Création</div>
              <div>
                {% if Person.CreatedAt|date:"2006-01-02" == "1970-01-01" %}
                  <code>Inconnu</code>
                {% else %}
                  <code>{{ Person.CreatedAt|date:"02.01.2006 15:04" }}</code>
                {% endif %}
              </div>
            </div>
            <div
              class="col-xxl col-lg-4 col-md-6 order-last order-md-last order-lg-last order-xxl-last"
            >
              <div class="text-bold fs-7 mt-xxl-0 mt-2">Modification</div>
              <div>
                {% if Person.UpdatedAt|date:"2006-01-02" == "1970-01-01" %}
                  <code>Inconnu</code>
                {% else %}
                  <code>{{ Person.UpdatedAt|date:"02.01.2006 15:04" }}</code>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>

    <nav class="mt-3 mb-5">
      <ul class="pagination justify-content-center">
        {% if Pagination.CurrentPage <= 1 %}
          <li class="page-item disabled">
            <a class="page-link" href="javascript:;">
              <i class="bi-rewind"></i>
            </a>
          </li>
          <li class="page-item disabled">
            <a class="page-link" href="javascript:;">
              <i class="bi-caret-left"></i>
            </a>
          </li>
        {% else %}
          <li class="page-item">
            <a
              class="page-link"
              href="?p=1&s={{ SearchJSON|urlencode }}&c={{ OrderCol }}&o={{ OrderDir }}"
            >
              <i class="bi-rewind"></i>
            </a>
          </li>
          <li class="page-item">
            <a
              class="page-link"
              href="?&p={{ Pagination.CurrentPage - 1 }}&s={{ SearchJSON|urlencode }}&c={{ OrderCol }}&o={{ OrderDir }}"
            >
              <i class="bi-caret-left"></i>
            </a>
          </li>
        {% endif %}

        {% for i in Pagination.Pages %}
          <li class="page-item">
            <a
              {% if i == Pagination.CurrentPage %}
                class="page-link active"
              {% else %}
                class="page-link"
              {% endif %}
              href="?&p={{ i }}&s={{ SearchJSON|urlencode }}&c={{ OrderCol }}&o={{ OrderDir }}"
            >
              {{ i }}
            </a>
          </li>
        {% endfor %}

        {% if Pagination.CurrentPage >= Pagination.MaxPages %}
          <li class="page-item disabled">
            <a class="page-link" href="javascript:;">
              <i class="bi-caret-right"></i>
            </a>
          </li>
          <li class="page-item disabled">
            <a class="page-link" href="javascript:;">
              <i class="bi-fast-forward"></i>
            </a>
          </li>
        {% else %}
          <li class="page-item">
            <a
              class="page-link"
              href="?&p={{ Pagination.CurrentPage + 1 }}&s={{ SearchJSON|urlencode }}&c={{ OrderCol }}&o={{ OrderDir }}"
            >
              <i class="bi-caret-right"></i>
            </a>
          </li>
          <li class="page-item">
            <a
              class="page-link"
              href="?p={{ Pagination.MaxPages }}&s={{ SearchJSON|urlencode }}&c={{ OrderCol }}&o={{ OrderDir }}"
            >
              <i class="bi-fast-forward"></i>
            </a>
          </li>
        {% endif %}
      </ul>
    </nav>
  </div>
{% endblock %}