{% load static %}

<h1 class="page-title">Wallonie Connect</h1>

<section class="articles-container">

  <a href="https://my-formulaires.imio.be/wallonie-connect-acceder-a-mon-compte/"
     class="card-link" aria-label="Mon compte Wallonie Connect" target="_blank">
    <article class="card">
      <div class="card-icon">
        <img src="https://demo.guichet-citoyen.be/media/uploads/2026/02/13/wca.jpg"
             alt="Redirection vers mon compte Wallonie Connect">
      </div>
      <div class="card-content">
        <h3 class="card-title">Mon compte Wallonie Connect</h3>
        <p class="subtitle">Voir et modifier mes informations personnelles.</p>
      </div>
    </article>
  </a>

  {% if user|has_role:"referent-wallonie-connect" %}
    <a href="{{ eservices_url }}/creation-d-utilisateur-et-attribution-des-droits/"
       class="card-link" aria-label="Créer un compte pour un ou plusieurs collègues" target="_blank">
      <article class="card">
        <div class="card-icon">
          <img src="https://my.imio.be/media/uploads/2026/02/24/addwca.webp"
               alt="Ajouter un utilisateur">
        </div>
        <div class="card-content">
          <h3 class="card-title">Ajouter un collègue</h3>
          <p class="subtitle">Créer un accès pour un ou plusieurs collègues.</p>
        </div>
      </article>
    </a>
  {% endif %}

  <a href="https://docs.imio.be/wallonie-connect/"
     class="card-link" aria-label="Documentation Wallonie Connect" target="_blank">
    <article class="card">
      <div class="card-icon">
        <img src="https://my.imio.be/media/uploads/2026/02/16/icon_documentation.webp"
             alt="Documentation Wallonie Connect">
      </div>
      <div class="card-content">
        <h3 class="card-title">Documentation Wallonie Connect</h3>
        <p class="subtitle">Visualiser la documentation Wallonie Connect.</p>
      </div>
    </article>
  </a>

  {% if user|has_role:"referent-wallonie-connect" %}
    <a href="https://docs.imio.be/wallonie-connect/agent-referent/index.html"
       class="card-link" aria-label="Documentation Wallonie Connect pour agent référent" target="_blank">
      <article class="card">
        <div class="card-icon">
          <img src="https://my.imio.be/media/uploads/2026/02/16/icon_referent.webp"
               alt="Documentation Wallonie Connect à destination des agents référents">
        </div>
        <div class="card-content">
          <h3 class="card-title">Documentation Wallonie Connect - Agent Référent</h3>
          <p class="subtitle">Visualiser la documentation Wallonie Connect - Agent Référent.</p>
        </div>
      </article>
    </a>
  {% endif %}

</section>


{% if homepage_data.data %}

  <h2 class="page-title">
    Liste des utilisateurs de votre collectivité,
    <span>{{ json.realm|upper }}</span>
  </h2>
  {% if user|has_role:"referent-wallonie-connect" %}
  <p class="total_users">
    Votre collectivité compte
    <strong>{{ homepage_data.meta.users_total }}</strong>
    membres enregistrés.
  </p>
  {% else %}
    <p class="total_users">
    Liste des agents référents de votre collectivité.
  </p>
  {% endif %}

  <table class="user-table" id="userTable">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Email</th>
        <th>Statut</th>
        <th>Groupes</th>
        {% if user|has_role:"referent-wallonie-connect" %}
          <th>Actions</th>
        {% endif %}
        <th>
          <div class="search-container">
            <input
              type="text"
              id="searchInput"
              placeholder="Rechercher un nom, prénom ou groupe..."
              class="search-input"
            >
          </div>
        </th>
      </tr>
    </thead>

    <tbody>
      {% for u in homepage_data.data %}
        {% if json.realm == "imio" or not u.email|endswith:"@imio.be" and not u.email|endswith:"@affinitic.be" %}

          {% if user|has_role:"referent-wallonie-connect" %}
            <tr>
              <td>{{ u.firstName }} {{ u.lastName }}</td>

              <td>
                <a href="mailto:{{ u.email }}" class="mail-link">
                  {{ u.email }}
                </a>
              </td>

              <td>
                {% if u.enabled %}
                  <span class="status active">Actif</span>
                {% else %}
                  <span class="status inactive">Inactif</span>
                {% endif %}
              </td>

              <td>
                {% if u.groups %}
                  {% for group in u.groups %}
                    <span class="group-badge">{{ group.name }}</span>
                  {% endfor %}
                {% else %}
                  <span class="no-group">Aucun groupe</span>
                {% endif %}
              </td>

              <td class="actions-cell">
                <div class="actions-wrap">
                  <a href="{{eservices_url}}keycloak-iateleservices/wca-modifier-utilisateur/?user_id={{ u.id }}"
                     class="action-btn edit-btn" title="Modifier les données de l'utilisateur">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#bd1f68" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
                    </svg>
                  </a>

                  <a href="{{eservices_url}}keycloak-iateleservices/wca-modifier-roles-utilisateur/?user_id={{ u.id }}"
                     class="action-btn edit-btn" title="Modifier l'accès aux applications">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#bd1f68" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <circle cx="7" cy="7" r="3"/>
                      <path d="M9.5 9.5l10 10m-4.5-1.5l1.5-1.5m1.5 4.5l1.5-1.5"/>
                    </svg>
                  </a>

                  <a href="{{eservices_url}}keycloak-iateleservices/wca-reinitialiser-2fa-utilisateur/?user_id={{ u.id }}"
                     class="action-btn edit-btn" title="Réinitialiser la 2FA">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
                            stroke="#bd1f68" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M9 12l2 2 4-4"
                            stroke="#bd1f68" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </a>
                </div>
              </td>

              <td></td>
            </tr>

          {% else %}
            {% for group in u.groups %}
              {% if group.name == "référents Wallonie Connect" %}
                <tr>
                  <td>{{ u.firstName }} {{ u.lastName }}</td>

                  <td>
                    <a href="mailto:{{ u.email }}" class="mail-link">
                      {{ u.email }}
                    </a>
                  </td>

                  <td>
                    {% if u.enabled %}
                      <span class="status active">Actif</span>
                    {% else %}
                      <span class="status inactive">Inactif</span>
                    {% endif %}
                  </td>

                  <td>
                    <span class="group-badge">référents Wallonie Connect</span>
                  </td>

                  <td></td>
                  <td></td>
                </tr>
              {% endif %}
            {% endfor %}
          {% endif %}

        {% endif %}
      {% endfor %}
    </tbody>
  </table>

  <p id="noResultsMessage" class="no-results" style="display:none;">
    Aucun résultat trouvé.
  </p>

{% else %}
  <p>Aucun utilisateur trouvé.</p>
{% endif %}


<style>
.articles-container{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
  align-items:stretch;
  max-width: 870px;
  margin: 40px auto;
}

.card-link{
  display:flex;
  flex: 0 0 420px;
  max-width: 420px;
  min-width: 0;
  text-decoration:none;
  color:inherit;
}

@media (max-width:750px){
  .articles-container{
    max-width:none;
    margin:40px 0;
  }
  .card-link{
    flex:0 0 100%;
    max-width:100%;
  }
}

.card-link:hover,
.card-link:focus,
.card-link:active{
  text-decoration:none;
  color:inherit;
}

.card{
  height:100%;
  width:100%;
  max-height:170px;
  background:#ffffff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border:2px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display:flex;
  align-items:center;
  gap:20px;
  cursor:pointer;
}

.card-link:hover .card{
  border-color:#bd1f68;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

.card-icon{
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.card-icon img{
  max-width:100%;
  max-height:133%;
  height:auto;
  width:auto;
}

.card-title{
  margin:0 0 8px 0;
  font-size:20px;
  text-align:left;
  color:#bd1f68;
}

.subtitle{
  margin:0;
  color:#666;
  font-size:14px;
  text-align:left;
}

.page-title{
  text-align:center;
  color:#bd1f68 !important;
}

.page-title span{
  font-weight:600;
}

.total_users{
  text-align:center;
  color:#bd1f68;
  margin:0 0 20px 0;
}

.user-table{
  width:100%;
  border-collapse:collapse;
  background:#ffffff;
  overflow:hidden;
  font-size:14px;
}

.user-table thead{
  background-color:#bd1f68;
  color:white;
  text-align:left;
}

.user-table thead th{
  position:sticky;
  z-index:2;
  background-color:#bd1f68;
  top:0;
}

.user-table th,
.user-table td{
  padding:10px 12px;
  border-bottom:1px solid #eee;
}

.user-table tbody tr:hover{
  background-color:#f9f9f9;
}

.group-badge{
  display:inline-block;
  background-color:#f2e6ec;
  color:#bd1f68;
  padding:4px 8px;
  border-radius:12px;
  font-size:12px;
  margin:2px 4px 2px 0;
}

.no-group{
  color:#999;
  font-style:italic;
}

.search-container{
  display:flex;
  justify-content:flex-end;
}

.search-input{
  width:300px;
  padding:8px 10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
}

.status{
  padding:4px 8px;
  border-radius:12px;
  font-size:12px;
  font-weight:500;
}

.status.active{
  background-color:#e6f6ec;
  color:#1f8f4e;
}

.status.inactive{
  background-color:#fdeaea;
  color:#c0392b;
}

.user-table th:nth-child(3),
.user-table td:nth-child(3){
  padding-right:50px;
  padding-left:50px;
}

.no-results{
  text-align:center;
  margin-top:20px;
  color:#999;
  font-style:italic;
}

.actions-cell{
  white-space:nowrap;
}

.actions-wrap{
  display:flex;
  gap:5px;
  align-items:center;
  justify-content:flex-end;
}

.edit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:6px;
  transition:background 0.2s;
  text-decoration:none;
  line-height:0;
}

.edit-btn:hover{
  background:#f2e6ec;
}

.edit-btn svg{
  display:block;
}
</style>


<script>
(function () {

  var searchInput = document.getElementById("searchInput");
  var table = document.getElementById("userTable");
  var noResultsMessage = document.getElementById("noResultsMessage");

  if (!searchInput || !table) return;

  (function sortInactiveToBottom() {

    var tbody = table.getElementsByTagName("tbody")[0];
    if (!tbody) return;

    var rows = Array.prototype.slice.call(
      tbody.getElementsByTagName("tr")
    );

    rows.sort(function (a, b) {

      var aStatus = (a.cells[2] ? a.cells[2].innerText : "").toLowerCase();
      var bStatus = (b.cells[2] ? b.cells[2].innerText : "").toLowerCase();

      var aInactive = aStatus.indexOf("inactif") !== -1 ? 1 : 0;
      var bInactive = bStatus.indexOf("inactif") !== -1 ? 1 : 0;

      return aInactive - bInactive;
    });

    for (var i = 0; i < rows.length; i++) {
      tbody.appendChild(rows[i]);
    }

  })();

  function applyFilter() {

    var filter = (searchInput.value || "")
      .toLowerCase()
      .replace(/^\s+|\s+$/g, "");

    var tbody = table.getElementsByTagName("tbody")[0];
    if (!tbody) return;

    var rows = tbody.getElementsByTagName("tr");

    var visibleCount = 0;

    for (var i = 0; i < rows.length; i++) {

      var cells = rows[i].getElementsByTagName("td");

      var nameText   = (cells[0] ? cells[0].innerText : "").toLowerCase();
      var mailText   = (cells[1] ? cells[1].innerText : "").toLowerCase();
      var statusText = (cells[2] ? cells[2].innerText : "").toLowerCase();
      var groupsText = (cells[3] ? cells[3].innerText : "").toLowerCase();

      var match =
        nameText.indexOf(filter)   !== -1 ||
        mailText.indexOf(filter)   !== -1 ||
        statusText.indexOf(filter) !== -1 ||
        groupsText.indexOf(filter) !== -1;

      rows[i].style.display = match ? "" : "none";

      if (match) visibleCount++;
    }

    if (noResultsMessage) {
      noResultsMessage.style.display =
        (visibleCount === 0) ? "block" : "none";
    }
  }

  searchInput.addEventListener("keyup", applyFilter);

})();
</script>