<%- contentFor( 'body') %>

<div class="jumbotron text-center">
    <h1>Usuários Cadastrados</h1>
    <p>Lista de usuários Cadastrados no sistema - usando EJS.</p>
</div>

<div class="row">
    <div class="col-lg-12 adiciona">
        <a type="button" class="btn btn-primary" href="#adiciona" >
            <i class="fas fa-plus"></i>
            Adicionar usuário
        </a>
    </div>            
    <table class="table table-hover table-striped" id="list">
        
            <thead>
            <tr>
                <th>Nome</th>
                <th>Email</th>
                <th>Endereço</th>
                <th>Idade</th>
                <th>Altura</th>
                <th>Votou?</th>
                <th>Ação</th>
                <th>Deleta</th>
            </tr>
            </thead>
            <tbody>
                  
    
                <% let linkRemove="/cadastro/remove/"; %>
                <% let linkUpdate="/cadastro/update/"; %>
    
                <% if(users.length >0){%>
                    <% for(let index=0;index<users.length;index++){ %>
                        <tr data-index-row="<%= index %>">
                            
                        <td data-index-row="<%=index%>">
                            <span  class="show"><%= users[index].name %></span>
                            <input type="text" name="name"  class="hidden" value="<%= users[index].name %>" size="30">
                        </td>
                        <td data-index-row="<%=index%>">
                            <span  class="show"><%= users[index].email %></span>
                            <input type="text" name="email"  class="hidden" value="<%= users[index].email %>" size="30">
                        </td>
                        <td data-index-row="<%=index%>">
                            <span  class="show"><%= users[index].address %></span>
                            <input type="text" name="address"  class="hidden" value="<%= users[index].address %>" size="30">
                        </td>
                        <td data-index-row="<%=index%>">
                            <span  class="show"><%= users[index].age %></span>
                            <input type="text" name="age"  class="hidden" value="<%= users[index].age %>" size="3">
                            
                        </td>
                        <td data-index-row="<%=index%>">
                            <span  class="show"><%= users[index].heigth %></span>
                            <input type="text" name="heigth"  class="hidden" value="<%= users[index].heigth %>" size="4">
                            
                        </td>
                        <td data-index-row="<%=index%>">
                            <span  class="show"><%= users[index].vote %></span>
                            <input type="text" name="vote" class="hidden" value="<%= users[index].vote %>" size="6">
                            
                        </td>
                        <td data-index-row="<%=index%>" class="hidden" data-index-row="<%=index%>">
                            <input type="button" value="Atualizar" class="hidden" >
                        </td>
                        <!-- a funcao update()  foi criada no arquivo script.js presente no diretorio public. Ela fará a modificação dos itens e envio dos dados na forma de uma string para o servidor usando como rta /cadastro/update/ -->
                        <td  data-index-row="<%= index %>">
                            <a href="#" onclick="update('<%=index%>','<%= linkUpdate %>')" class="show"><i class="fas fa-pen"></i></a>  
                        </td> 
                        
                        <!-- para passar parametros para uma rota criada basta usar o delimitador "/" entre os valores dos parametros e defini-los no arquivo de rotas usando ":" para separar cada valor, seguido de um nome que identificarar esse valor. Exemplo: /cadastro/remove/:id -->
                        <td  data-index-row="<%= index %>">
                            <!-- <a href="#" class="show" onclick="remove('<%=index %>','<%=linkRemove%>')"><i class="fas fa-trash-alt"></i></a> -->
                            <a href="#" class="show" onclick="remove('<%=index %>','<%=users[index].name %>','<%=linkRemove%>')"><i class="fas fa-trash-alt"></i></a>
                        </td>
                        </tr>
                    <% } //for %>
                <% }else{%>
                    <tr><td colspan="7"><p class="bg-info text-white">Nenhum dado cadastrado</p></td></tr>
                <%} //If-Else %>   
            </tbody>
        </table>

        <hr>
        <div class="container" id="adiciona">
            
                <h2>Cadastrar novo usuário</h2>

                <% let linkPost="/cadastro/add"; %>

                <form action="#" onsubmit="add('<%=linkPost%>')">
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="_name">Nome:</label>
                            <input type="text" name="_name" id="_name" class="form-control" placeholder="Nome Completo" required>
                        </div>
                        <div class="form-group col-lg-6">
                            <label for="_email">E-mail:</label>
                            <input type="email" name="_email" id="_email" class="form-control" placeholder="Ex: email@email.com" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-12">
                            <label for="_address">Endereço:</label>
                            <input type="text" name="_address" id="_address" class="form-control" placeholder="Ex: Av. Jovita Feitosa, 31" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-4">
                            <label for="_age">Idade:</label>
                            <input type="number" name="_age" id="_age" class="form-control" size="3" max-length="3" placeholder="Ex: 32" required>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="_heigth">Altura:</label>
                            <input type="number" name="_heigth" id="_heigth" class="form-control" size="4" max-length="4" placeholder="Ex: 1.80" step="0.10" required>
                        </div>
                        <div class="form-group col-lg-4">
                            <!--label for="_vote">Voto:</label>
                            <input type="text" name="_vote" id="_vote" class="form-control" size="5" placeholder="Ex: 'true' ou 'false'" required>
                        </div-->
                            <div class="form-check-inline">
                                <input class="form-check-input" type="radio" name="_vote" id="votoTrue" value="true">
                                <label class="form-check-label" for="flexRadioDefault1">
                                Já votou
                                </label>
                            </div>
                            <div class="form-check-inline">
                                <input class="form-check-input" type="radio" name="_vote" id="votoFalse" value="false" checked>
                                <label class="form-check-label" for="flexRadioDefault2">
                                Não votou
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Enviar" class="btn btn-success">
                        <button type="reset" value="Cancelar" class="btn btn-warning">Cancelar</button>
                        <a type="button" class="btn btn-secondary" href="#topo">Voltar ao topo</a>

                    </div>
                </form>
            </div>
        </div>
    
</div>