<%- include("templates/cabecera.ejs") %>
    <title>Inicio</title>
    </head>

    <body>
        <div class="container-fluid">
            <h1>Inicio</h1>
            <p>Bienvenido a la base de datos del popular juego Leage of Legends</p>
            <div class="champs">
                <h2>Campeones</h2>
                <div class="row aling-items-center">
                    <% if (arrayCampeones.length> 0) { %>
                        <!--Haremos el foreach para recorrer el array-->
                        <% arrayCampeones.forEach(campeones=> { %>
                            <div class="col-2">
                                <img src="<%= campeones.Img %>" width="100%">
                            </div>
                            <div class="col-2">
                                <a href="campeones/<%= campeones.id %>/<%= campeones.Nombre %>">
                                    <%= campeones.Nombre %>
                                </a>
                            </div>
                            <% }) %>
                                <% } %>
                </div>
            </div>
            <h2>Builds</h2>
            <div class="build ">
                <div class="row aling-items-center">
                    <% if (arrayBuild.length> 0) { %>
                        <!--Haremos el foreach para recorrer el array-->
                        <% arrayBuild.forEach(build=> { %>
                            <div class="col-2">
                                <a href="builds/<%= build.id %>/<%= build.Nombre %>">
                                    <%= build.Nombre %>
                                </a>
                            </div>
                            <% }) %>
                                <% } %>
                </div>

            </div>
            <h2>Modos</h2>
            <div class="modos">
                <div class="row aling-items-center">
                <% if (arrayModo.length> 0) { %>
                    <!--Haremos el foreach para recorrer el array-->
                    <% arrayModo.forEach(modo=> { %>
                        <div class="col-2">
                            <img src="<%= modo.Img%>" width="100%">
                        </div>
                        <div class="col-2">
                            <a href="modos/<%= modo.id %>/<%= modo.Nombre %>">
                                <%= modo.Nombre %>
                            </a>
                        </div>
                        <% }) %>
                            <% } %>
            </div>
        </div>
        <h2>Minileyendas</h2>
        <div class="minileyendas">
            <div class="row aling-items-center">
            <% if (arrayMinileyendas.length> 0) { %>
                <!--Haremos el foreach para recorrer el array-->
                <% arrayMinileyendas.forEach(minileyenda=> { %>
                    <div class="col-2">
                        <img src="<%= minileyenda.Img %>" width="100%">
                    </div>
                    <div class="col-2">
                        <a href="minileyendas/<%= minileyenda.id %>/<%= minileyenda.Nombre %>">
                            <%= minileyenda.Nombre %>
                        </a>
                    </div>
                    <% }) %>
                        <% } %>
        </div>
        </div>
        <h2>Skins</h2>
        <div class="skins">
            <div class="row aling-items-center">
                <% if (arraySkins.length> 0) { %>
                    <!--Haremos el foreach para recorrer el array-->
                    <% arraySkins.forEach(skin=> { %>
                        <div class="col-2">
                            <img src="<%=skin.Img%>" width="100%">
                        </div>
                        <div class="col-2">
                            <a href="skins/<%= skin.id %>/<%= skin.Nombre %>">
                                <%= skin.Nombre %>
                            </a>
                        </div>
                        <% }) %>
                            <% } %>
            </div>
        </div>
        </div>
        <%- include("templates/footer.ejs") %>