<%- include("templates/cabecera.ejs") %>
<link rel="stylesheet" href="/css/campeon_Styles.css">
<title><%= campeon.Nombre %></title>
</head>
<body>
<div class="header" >
    <img src="<%= campeon.Img%>" bi>
</div>
    <div class="container">
        <h1>
            <%= campeon.Nombre %>
        </h1>
        <div class="row">
            <h2>Historia</h2>
            <div class="col-12">
                <p>
                    <%= campeon.Lore%>
                </p>
            </div>
        </div>
        <div class="row">
            <h2>Habilidades</h2>
            <div class="col-6"></div>
            <div class="col-6">
                <p>
                    <%= campeon.Habilidades %>
                </p>
            </div>
        </div>
        <div class="row">
            <h2>Región</h2>
            <div class="col-6"></div>
            <div class="col-6">
                <p>
                    <%= campeon.Region %>
                </p>
            </div>
        </div>
        <div class="row">
            <h2>Precio</h2>
            <div class="col-6"></div>
            <div class="col-6">
                <p>
                    <%= campeon.Precio %>
                </p>
            </div>
        </div>
        <div class="row">
            <h2>Vídeo ingame</h2>
            <div class="col-12"><iframe src="<%= campeon.Video %>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
        </div>
        <h2 class="row">Skins</h2>
        <section class="row">
            <% if (arraySkins.length> 0) { %>
                <!--Haremos el foreach para recorrer el array-->
                <% arraySkins.forEach(skins=> { %>
                    <img src="<%= skins.Img%>" width="100%">
                    <% }) %>
                        <% } %>
        </section>
        <a class="btn btn-info" href="/">Volver</a>
    </div>
    <%- include("templates/footer.ejs") %>