<%- contentFor( 'body') %>
    <div class="table-responsive-xl">
        <h1>Usuários recentemente cadastrados</h1>
        <p>Lista dos novos usuários cadastrados no sistema.</p>
        <div class="add-form" class="hidden">
            <label for="userName" class="hidden">Nome</label>
            <input type="text" id="userName" placeholder="Nome sobrenome" class="hidden">
            <label for="userEmail" class="hidden">Email</label>
            <input type="email" id="userEmail" placeholder="Email@dominio.com" class="hidden">
            <label for="userAddress" class="hidden">Endereço</label>
            <input type="text" id="userAddress" placeholder="Rua, numero" class="hidden">
            <label for="userAge" class="hidden">Idade</label>
            <input type="number" id="userAge" min="1" placeholder="Idade" class="hidden">
            <label for="userheigth" class="hidden">Altura (metros)</label>
            <input type="number" id="userheigth" placeholder="Altura" class="hidden" min="1" step="0.01">
            <label for="userVote" class="hidden">Vota?</label>
            <input type="checkbox" id="userVote" placeholder="Vota" class="hidden">
        </div>
        <div class="add-form-buttons" class="hidden">
            <a href="#" onclick="add()" class="hidden" id="add-form-submit">Adicionar</a>
            <a href="#" onclick="escondeItem()" class="hidden" id="add-form-cancel">Cancelar</a>
        </div>
        <a href="#" onclick="mostraItem()" id="add-form-call">Adicionar novo usuário</a>

        <table class="table table-hover table-light">
            <thead class="thead-dark">
            <tr>
                <th>Nome</th>
                <th>Email</th>
                <th>Endereço</th>
                <th>Idade</th>
                <th>Altura</th>
                <th>Votante</th>
                <th>Editar</th>
                <th>Remover</th>
            </tr>
            </thead>
            <tbody>
                

                <% let linkRemove="/cadastro/remove/"; %>
                <% let linkUpdate="/cadastro/update/"; %>

                <% for(let index=0;index < users.length;index++){ %>
                    <tr>
                        
                    <td data-index-row="<%=index%>">
                        <span  class="show"><%= users[index].name %></span>
                        <input type="text" name="name"  class="hidden" value="<%= users[index].name %>">
                    </td>


                    <td data-index-row="<%=index%>">
                        <span  class="show"><%= users[index].email %></span>
                        <input type="text" name="email"  class="hidden" value="<%= users[index].email %>">
                    </td>


                    <td data-index-row="<%=index%>">
                        <span  class="show"><%= users[index].address %></span>
                        <input type="text" name="address"  class="hidden" value="<%= users[index].address %>">
                    </td>


                    <td data-index-row="<%=index%>">
                        <span  class="show"><%= users[index].age %></span>
                        <input type="text" name="age"  class="hidden" value="<%= users[index].age %>">
                    </td>


                    <td data-index-row="<%=index%>">
                        <span  class="show"><%= users[index].heigth %></span>
                        <input type="text" name="heigth"  class="hidden" value="<%= users[index].heigth %>">  
                    </td>


                    <td data-index-row="<%=index%>">
                        <span  class="show"><%= users[index].vote %></span>
                        <input type="text" name="vote" class="hidden" value="<%= users[index].vote %>">
                        
                    </td>
                    <td data-index-row="<%=index%>" class="hidden" data-index-row="<%=index%>">
                    <input type="button" value="Atualizar" class="hidden" >
                    </td>


                
                    <td  data-index-row="<%= index %>">
                        <a href="#" onclick="update('<%=index%>','<%= linkUpdate %>')" class="show"><i class="fas fa-pen"></i></a>  
                    </td> 
                    

                    <td  data-index-row="<%= index %>">
                        <a href="#" class="show" onclick="remove('<%=index %>','<%=linkRemove%>')"><i class="fas fa-trash-alt"></i></a>
                    </td>

                    </tr>
                <% } %>

            </tbody>
        </table>

        <div class="list-header">
            <h1>Todos os usuários</h1>
            <a href="#" onclick="listar()" id="list-call">Mostrar lista</a>
        </div>
        <table class="table table-hover table-light hidden" id="list">
            <thead>
            <tr>
                <th>Nome</th>
                <th>Email</th>
                <th>Endereço</th>
                <th>Idade</th>
                <th>Altura</th>
                <th>Votante</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>