<%- include("../template/cabecera") %>
<div class="container">
    <!--Si existen elementos en el array de Voluntario-->
    <% if (arrayVoluntario.length > 0) { %>
     <!--Haremos el foreach para recorrer el array-->
     <% arrayVoluntario.forEach(voluntario => { %>
       <!--Aquí podremos mostrar todos los pokemon en una tabla-->
     <% }) %>
    <% } %>
</div>
<div class="container ">
    <h1 class="d-flex flex-row justify-content-center alig-items-center">Voluntario</h1>
    <a  class="btn btn-success m-2 d-flex flex-row justify-content-center alig-items-center" href="/voluntario/crear">Añadir voluntario</a>
    <div class="table-responsive-sm table-responsive-md">
      <table class="table table-hover table-light">
          <thead>
              <tr class="table-dark">
                <th scope="col">Formación</th>
                <th scope="col">Experiencia</th>
                <th scope="col">Nombre</th>
                <th scope="col">Apellidos</th>
                <th scope="col">Edad</th>
                <th scope="col">Opciones</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                  <% if (arrayVoluntario.length>0) {%>
                      <% arrayVoluntario.forEach(voluntario =>{ %>
                <td><%= voluntario.formacion  %></td>
                <td><%= voluntario.experiencia  %></td>
                <td><%= voluntario.nombre  %></td>
                <td><%= voluntario.apellidos  %></td>
                <td><%= voluntario.edad  %></td>
                <td><a class="btn btn-warning btn-sm" href="/voluntario/<%= voluntario.id %>">Editar/Eliminar</a></td>
              
              </tr>
              <% }) %>
              <% } %>
            </tbody>
      </table>
  </div>

    
</div>
<%- include("../template/footer") %>