<%- include("template/cabecera.ejs", {cabecera:"Panel"}) %>
    <div class="container">
        <h1>CRUD Mongo</h1>
        <a class="btn btn-success btn-block my-4" href="/gimnasio/creargimnasio">Crear un nuevo gimnasio</a>

        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Tipo</th>
                    <th scope="col">Nivel</th>
                    <th scope="col">Numero de Entrenadores</th>
                    <th scope="col">Pokemon Famoso</th>
                </tr>
            </thead>
            <tbody>
                <% if (arrayGimnasio.length> 0) { %>
                    <!--Haremos el foreach para recorrer el array-->
                    <% arrayGimnasio.forEach(gimnasio=> { %>
                        <tr>
                            <th scope="row">
                                <%= gimnasio.id %>
                            </th>
                            <td>
                                <%= gimnasio.tipo %>
                            </td>
                            <td>
                                <%= gimnasio.nivel %>
                            </td>
                            <td>
                                <%= gimnasio.numeroentrenadores %>
                            </td>
                            <td>
                                <%= gimnasio.pokemonfamoso %>
                            </td>

                            <td>
                                <a class="btn btn-warning btn-sm" href="/gimnasio/<%= gimnasio.id %>">Editar/Eliminar</a>
                            </td>
                        </tr>
                        <% }) %>
                            <% } %>
            </tbody>
        </table>
        <a class="btn btn-dark btn-block my-4" href="/">Volver</a>
    </div>


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