<%- include("Template/cabecera", {tituloweb: "Pagina de inicio" }) %>
  <div class="container">
    <br>
    <h1>LISTA DE SOCIOS</h1>
    <a class="btn btn-success btn-block my-4" href="/socio/crearSocio">Registrar nuevo socio</a>
    <hr>
    <div class="table-responsive">
      <table class="table align-middle table-hover">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Nombre</th>
            <th scope="col">Apellidos</th>
            <th scope="col">DNI</th>
            <th scope="col">Telefono</th>
            <th scope="col">Direccion</th>
            <th scope="col">Código postal</th>
            <th scope="col" class="accion">Acción</th>
          </tr>
        </thead>
        <tbody>
          <% if (arraySocio.length> 0) { %>
            <% arraySocio.forEach(socio=> { %>
              <tr>
                <th scope="row">
                  <%= socio.id %>
                </th>
                <td>
                  <%= socio.nombre %>
                </td>
                <td>
                  <%= socio.apellidos %>
                </td>
                <td>
                  <%= socio.dni %>
                </td>
                <td>
                  <%= socio.telefono %>
                </td>
                <td>
                  <%= socio.direccion %>
                </td>
                <td>
                  <%= socio.codigo_postal %>
                </td>
                <td>
                  <a class="btn btn-warning btn-sm" href="socio/<%= socio.id %>">Editar/Eliminar</a>
                </td>
              </tr>
              <% }) %>
                <% } %>
        </tbody>
      </table>
    </div>
    <div>
      <div>
        <h2>INFORMATE SOBRE NUESTROS EVENTOS</h2>
      </div>
      <div class="col-md-12">
        <img style='float:left;width:auto;height:200px; margin-right:10px;' src="/images/sociosImagenes.jpg" alt="socio"/>
        <h3 class="texto">Lots of text here...With the four tiers of grids available you're bound to run into issues
          where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix
          that, use a combination of a .clearfix and o</h3>
      </div>
    </div>
    

  </div>
  <%- include("Template/footer") %>