<%- contentFor( 'body' ) %>

<div class="table-responsive-xl">
    <h2 style="color:#472AA3; padding-top: 2%;padding-left: 1%;">Usuários Cadastrados</h2>   
    <p style="color: #472AA3; font-weight: 700; padding-left: 1%;" >Lista de usuários Cadastrados no sistema.</p>  
    <hr>            
    <table class="table table-hover table-borderless" id="list" style="margin-top: 2.5%;">
        <thead style="background-image: linear-gradient(to right, #6C42FC , #E64789);">
            <tr style="color: #fff;">
                <th>Nome</th>
                <th>Email</th>
                <th>Endereço</th>
                <th>Idade</th>
                <th>Altura</th>
                <th>Vota?</th>
                <th>Editar</th>
                <th>Remover</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 %>">
                        </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%>" style="padding-left: 1.8%;">
                            <span  class="show"><%= users[index].age %></span>
                            <input type="number" step="0.1" name="age"  class="hidden" value="<%= users[index].age %>">
                            
                        </td>
                         <td data-index-row="<%=index%>" style="padding-left: 1.5%;">
                            <span  class="show"><%= users[index].height %></span>
                            <input type="number" name="height"  class="hidden" value="<%= users[index].height %>">
                            
                        </td>
                        <td data-index-row="<%=index%>" style="padding-left: 1.5%;">
                            <span  class="show"><%= users[index].vote %></span>
                            <input type="text" name="vote" class="hidden" placeholder="Digite Sim ou Não." 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 %>"style="padding-left: 2%;">
                            <a href="#" onclick="update('<%=index%>','<%= linkUpdate %>')" class="show"><i class="fas fa-pen"></i></a>  
                        </td> 
                        
                        <td  data-index-row="<%= index %>" style="padding-left: 3%;">
                            <a href="#" class="show" onclick="remove('<%=index %>','<%=users[index].name %>','<%=linkRemove%>')"><i class="fas fa-trash-alt"></i></a>
                        </td>
                    </div>
                    </tr>
                <% } //for %>
            <% }else{%>
                <tr><td colspan="7"><p class="bg-info text-white">Nenhum dado cadastrado</p></td></tr>
                <%} //If-Else %>   
        </tbody>
        
    </table>
        <div class="float-sm-left col-4" style="margin-top: 2%;">
        <h2 style="color: #472AA3;">Cadastrar novo usuário</h2>
            <div class="form-group">
                <label for="_name">Nome:</label>
                <input type="text" name="_name" data-ind="cadinp" id="_name" placeholder="Ex.Maria da Silva" class="form-control">
            </div>
            <div class="form-group">
                <label for="_email">E-mail:</label>
                <input type="email" name="_email" data-ind="cadinp" id="_email" placeholder="Ex.maria123@gmail.com" class="form-control">
            </div>
            <div class="form-group">
                <label for="_address">Endereço:</label>
                <input type="text" name="_address" data-ind="cadinp" id="_address"  placeholder="Ex.rua 12, bairro Dunas."class="form-control">
            </div>
            <div class="form-group">
                <label for="_age">Idade:</label>
                <input type="number" name="_age" data-ind="cadinp" id="_age" placeholder="Ex.20" class="form-control">
            </div>
            <div class="form-group">
                <label for="_heigth">Altura:</label>
                <input type="number" step="0.01" name="_heigth" data-ind="cadinp" id="_heigth" placeholder="Ex.1,77" class="form-control">
            </div>
            <div class="form-group">
                <label for="_vote">Votou?</label>
                <input type="text" name="_vote" data-ind="cadinp" id="_vote" placeholder="Digite Sim ou Não." class="form-control">
            </div>
            <div class="form-group">
                <input id="button" type="submit" value="Enviar" class="btn btn-success" onclick="add('/cadastro/add/')">
            </div>
           
        </div>
        <p class="clear"></p>
        <div class="float-sm-right col-7" style="top: -39.5em; ">
    <div  >
        <h2 style="color: #472AA3;">Lista de usuários</h2>
        <div>
            <input  type="button" value="Carregar Lista" onclick="lista('/cadastro/list')" class="show" id="btnlis">
        </div>
    </div>

    <div class="table-responsive-xl,  " style="max-height: 10%;">     
        <table class="table table-hover bg-light" id="lista"  style="margin-top: 2%;">
            <thead style="background-color: #472AA3;color: #fff; ">
            <tr>
                <th>Nome</th>
                <th>Email</th>
                <th>Endereço</th>
                <th>Idade</th>
                <th>Altura</th>
                <th>Vota?</th>
            </tr>
            </thead>
        </table>
    </div>
</div> 
<p class="clear"></p>
</div>