{% 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>
          <li class="breadcrumb-item"><a href="/admin">Administration</a></li>
          <li class="breadcrumb-item active">Champs supplémentaires</li>
        </ol>
      </nav>
      <hr />
    </div>

    <div class="row my-3">
      <div class="col-sm-6">
        <span class="h2 d-none d-sm-inline">Champs supplémentaires</span>
      </div>
      <div class="col-sm-6 text-end">
        <a class="btn btn-outline-primary" href="/admin/fields/add">
          <i class="bi-plus-lg"></i>
          Ajouter
        </a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-header">Membres</div>
      <div class="card-body">
        {% for Field in Fields %}
          {% if Field.PersonType == "member" %}
            <div class="card card-body my-2 py-2 bg-body-tertiary">
              <div class="row align-items-center">
                <div class="col-12 col-md-8 col-lg-6">
                  <div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
                  <div>
                    <a href="/admin/fields/{{ Field.ID }}">
                      {{ Field.Name }}
                    </a>
                  </div>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                  <div class="text-bold fs-7 mt-xxl-0 mt-2">Type de champ</div>
                  <div>
                    {% for Key, Value in FieldTypes %}
                      {% if Key == Field.FieldType %}
                        <span class="badge text-bg-primary"> {{ Value }} </span>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>

                <div class="col text-lg-end">
                  <div class="btn-group mb-2 mt-3 mt-lg-0 mb-lg-0">
                    <a
                      class="btn btn-sm btn-outline-primary"
                      href="/admin/fields/{{ Field.ID }}/move-up"
                    >
                      <i class="bi-arrow-up me-1"></i>
                      Monter
                    </a>
                    <a
                      class="btn btn-sm btn-outline-primary"
                      href="/admin/fields/{{ Field.ID }}/move-down"
                    >
                      <i class="bi-arrow-down me-1"></i>
                      Descendre
                    </a>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>

    <div class="card">
      <div class="card-header">Sympathisants</div>
      <div class="card-body">
        {% for Field in Fields %}
          {% if Field.PersonType == "contact" %}
            <div class="card card-body my-2 py-2 bg-body-tertiary">
              <div class="row align-items-center">
                <div class="col-12 col-md-8 col-lg-6">
                  <div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
                  <div>
                    <a href="/admin/fields/{{ Field.ID }}">
                      {{ Field.Name }}
                    </a>
                  </div>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                  <div class="text-bold fs-7 mt-xxl-0 mt-2">Type de champ</div>
                  <div>
                    {% for Key, Value in FieldTypes %}
                      {% if Key == Field.FieldType %}
                        <span class="badge text-bg-primary"> {{ Value }} </span>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>

                <div class="col text-lg-end">
                  <div class="btn-group mb-2 mt-3 mt-lg-0 mb-lg-0">
                    <a
                      class="btn btn-sm btn-outline-primary"
                      href="/admin/fields/{{ Field.ID }}/move-up"
                    >
                      <i class="bi-arrow-up me-1"></i>
                      Monter
                    </a>
                    <a
                      class="btn btn-sm btn-outline-primary"
                      href="/admin/fields/{{ Field.ID }}/move-down"
                    >
                      <i class="bi-arrow-down me-1"></i>
                      Descendre
                    </a>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}