<%- include("templates/cabecera.ejs", {titulo:'Contactos'}) %>
<div class="container">
    <h1>Contactos</h1>
    <div class="row">
        <div class="col-6"><a class="btn btn-info btn-block my-4" href="/contactos/aniadirContacto">Añadir accion</a></div>
        <div class="col-6"><a class="btn btn-info btn-block my-4" href="/">Volver</a></div>
    </div>
    <table class="table">
       <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Nombre</th>
                <th scope="col">Apellidos</th>
                <th scope="col">Movil</th>
                <th scope="col">Mayor</th>
                <th scope="col">Relación</th>
                <th scope="col">Acción</th>
            </tr>
       </thead>
       <tbody>
            <%if(arrayContactos.length>0){%>
                    <%arrayContactos.forEach(contactos=> { %>
                        <tr>
                            <th scope="row">
                                <%= contactos.id %>
                            </th>
                            <td>
                                <%= contactos.nombre %>
                            </td>
                            <td>
                                <%= contactos.apellidos%>
                            </td>
                            <td>
                                <%= contactos.movil %>
                            </td>
                            <td>
                                <%= contactos.mayor %>
                            </td>
                            <td>
                                <%= contactos.relacion%>
                            </td>
                            
                            <td>
                                <a class="btn btn-info btn-sm" href="contactos/<%= contactos.id %>">Editar/Eliminar</a>
                            </td>
                        </tr>
                        <% }) %>
           <% }%>
       </tbody>
    </table>
</div>
<%- include("templates/footer.ejs") %>