<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <title>Pokedex</title>
</head>

    <body>  

        <nav>

            <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>

            <ul>

                <li><img src="/img/pokebola.png" alt="pokebola"></li>
                <li> <a href="/cadastro"> Cadastro </a></li>
                <li><h1> <a href="/">  Pokedex </a></h1></li>
                <li> <a href="/detalhes"> Pokemons </a></li>
                <li><img src="/img/pokebola.png" alt="pokebola"></li>

            </ul>

        </nav>

        <header>

            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="/img/banner.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="/img/banner (1).jpg" alt=""></div>
                    <div class="swiper-slide"><img src="/img/banner (3).jpg" alt=""></div>
                    <div class="swiper-slide"><img src="/img/banner (4).jpg" alt=""></div>
                    <div class="swiper-slide"><img src="/img/banner (5).jpg" alt=""></div>
                </div>

                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>

            </div>

        </header>

        <main>

            <section id="cards">

                <h2>Lista dos Pokemons</h2>

                <% pokedex.forEach((pokemon) => { %>

                    <div class="container">
                        <div class="pokemon">
                            <div class="pokemon-card">
                                <h2 class="name"><%= pokemon.nome %></h2>
                                <span class="tipo"> Tipo: <%= pokemon.tipo %></span>                                
                                <img src="<%= pokemon.imagem %>" alt="" class="pokemon-img">
                            </div>
                        </div>
                    </div>
    
                <% }); %>
    
            </section>

        </main>

        <footer>
            <p>Todos os direitos reservados para <a target="_blank" href="https://www.instagram.com/mthiagoalves/">Thiago Alves</a> e <a target="_blank" href="https://www.instagram.com/diegofreitas50/"> Diego Freitas </a> Â©</p>
            <p>Inspirado em <a target="_blank" href="https://www.pokemon.com/br/">Pokedex</a></p>
        </footer>

        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <script src="./scriptSlide.js"></script>
        <script src="./script.js"></script>

    </body>

</html>