{% 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="my-3 text-end">
      <a class="btn btn-outline-primary" href="/admin/fields/add">
        <i class="bi-plus-lg"></i>
        Ajouter
      </a>
    </div>

    <div class="h4 my-2">Membres</div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th class="w-50">Nom</th>
            <th class="w-25">Type de champ</th>
            <th class="w-25"></th>
          </tr>
        </thead>
        <tbody>
          {% for Field in Fields %}
            {% if Field.PersonType == "member" %}
              <tr>
                <td>
                  <a href="/admin/fields/{{ Field.ID }}"> {{ Field.Name }} </a>
                </td>
                <td>
                  {% for Key, Value in FieldTypes %}
                    {% if Key == Field.FieldType %}
                      {{ Value }}
                    {% endif %}
                  {% endfor %}
                </td>
                <td class="text-end">
                  <div class="btn-group">
                    <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>
                </td>
              </tr>
            {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="h4 my-2">Contacts</div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th class="w-50">Nom</th>
            <th class="w-25">Type de champ</th>
            <th class="w-25"></th>
          </tr>
        </thead>
        <tbody>
          {% for Field in Fields %}
            {% if Field.PersonType == "contact" %}
              <tr>
                <td>
                  <a href="/admin/fields/{{ Field.ID }}"> {{ Field.Name }} </a>
                </td>
                <td>
                  {% for Key, Value in FieldTypes %}
                    {% if Key == Field.FieldType %}
                      {{ Value }}
                    {% endif %}
                  {% endfor %}
                </td>
                <td class="text-end">
                  <div class="btn-group">
                    <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>
                </td>
              </tr>
            {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}