{% extends 'base.html' %}

{% block base %}
  <h1>Usuários</h1>
  <div class="mb-3">
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Digite o nome do usuário" />
    <button type="button" class="btn btn-secondary">Pesquisar</button>
  </div>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Cadastrar</button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Cadastrar usuário</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
<form>
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">Nome</label>
        <input type="email" class="form-control" id="exampleFormControlInput1">

        <label for="exampleFormControlInput1" class="form-label">Sobrenome</label>
        <input type="email" class="form-control" id="exampleFormControlInput1">
    </div>

    </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
          <button type="button" class="btn btn-primary">Salvar</button>
        </div>
      </div>
    </div>
  </div>

  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Sobrenome</th>
        <th scope="col">Ações</th>
      </tr>
    </thead>
    <tbody>

  {% for chave, item in value.items() %}
    <th scope="row">1</th>
    <td>{{ item.bairro }}</td>
    <td>{{ item.nome }}</td>
    <td>
      <button type="button" class="btn btn-warning">Editar</button>
      <button type="button" class="btn btn-danger">Remover</button>
    </td>
  </tr>
  {% endfor %}
  </table>
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
{% endblock %}