{% extends "base.html.twig" %}

{% block title %}Usuários{% endblock %}

{% block body %}
<div class="col-lg-4">
  <div class="demo-inline-spacing">
    <a href="{{ path('app_usuario_form_adicionar') }}">
      <button type="button" class="btn btn-primary">
        <span class="icon-base bx bx-plus icon-sm me-2"></span>Adicionar Usuário
      </button>
    </a>
  </div>
</div>

<div class="tabela-container container-fluid px-2">
  <div class="row my-3">
    <div class="col-12">
      <input
        type="text"
        id="searchInput2"
        class="form-control form-control-md"
        placeholder="🔍 Pesquisar por nome, e-mail ou telefone..." />
    </div>
  </div>

  <div class="row justify-content-center mb-2">
    <div class="col-auto">
      <small id="totalItems" class="text-muted"></small>
    </div>
  </div>

  <div id="cardContainer2" class="row gy-3">
  {% for row in lista %}
    {% if row.idUsuario is defined and row.idUsuario %}
      <div class="col-12 card-item" data-search="{{ row.nome }} {{ row.email }} {{ row.status }}">
        <div class="card shadow-lg border-0 rounded-3">
          <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
              <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-1">
                  <h5 class="card-title mb-1">{{ row.nome }}</h5>
                  <span style="font-size: 8px; color: #777;">●</span>
                  {% if row.status == 'Ativo' %}
                    <span class="badge bg-success d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size: 0.75rem;">
                      <i class="bx bxs-toggle-right"></i> {{ row.status }}
                    </span>
                  {% elseif row.status == 'Inativo' %}
                    <span class="badge bg-danger d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size: 0.75rem;">
                      <i class="bx bxs-toggle-left"></i> {{ row.status }}
                    </span>
                  {% endif %}
                </div>
                <p class="card-text text-muted mb-1 d-flex align-items-center gap-1"><i class="bx bx-envelope"></i> {{ row.email }}</p>
                <p class="card-text text-muted d-flex align-items-center gap-1"><i class="bx bx-buildings"></i> {{ row.nomeHolding }}</p>
              </div>

              <div class="d-flex align-items-center gap-1">
                <div class="dropdown">
                  <button class="btn btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a class="dropdown-item" href="{{ path('app_usuario_form_visualizar', {'idUsuario': row.idUsuario}) }}">
                        <i class="bx bx-show text-primary me-1"></i> Visualizar
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  {% endfor %}
  </div>

  <div class="row mt-4">
    <div class="col text-center">
      <nav aria-label="Paginação">
        <ul id="pagination2" class="pagination justify-content-center mb-0"></ul>
      </nav>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/usuario/Usuario.js') }}"></script>
<script>
  $(document).ready(function () {
    const tabelaUsuarios = new TabelaDefault({
      cardContainerId: 'cardContainer2',
      paginationId: 'pagination2',
      searchInputId: 'searchInput2',
      itemsPerPage: 4
    });
  });
</script>
{% endblock %}