<!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"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <title>Pokedex</title>
</head>

    <body>  

        <nav>
            <!-- nav dedicada para resoluções pequenas  -->
            <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>

            <ul>
                <!-- nav principal -->
                <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>
            <!-- Banner e swiper do mesmo -->
            <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>
                <!-- botões do swiper -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>

            </div>

        </header>

        <main>
            <!-- section principal dos cards -->
            <section id="cards">
                <!-- classe onde deixa os cards lado a lado -->
                <div class="container-wrap">

                    <h2>Lista dos Pokemons</h2>
                    <!-- for each feito para mostrar todos os dados cadastrados no objeto do arquivo JS -->
                    <% pokedex.forEach((pokemon) => { %>

                        <!-- primeiro card de exibição dos pokemons -->
                        <div class="container">
                            <div class="pokemon">
                                <div class="pokemon-card">
                                    <h2 class="name"><%= pokemon.nome %></h2>
                                    <span class="tipo"> Id: <%= pokemon.id %></span>
                                    <a class="popup-btn">Detalhes</a>
                                    <img src="<%= pokemon.imagem %>" alt="" class="pokemon-img">
                                </div>
                                <!-- segundo card que abre como popup com detalhes dos pokemons -->
                                <div class="popup-view">
                                    <div class="popup-card">
                                        <a> <i class="fas fa-times close-btn"></i></a>
                                        <div class="pokemon-img">
                                            <img src="<%= pokemon.imagem %>" alt="">
                                        </div>
                                        <div class="info">
                                            <h2 id="name-info"><%= pokemon.nome %> <br> <span><%= pokemon.tipo %></span> </h2>
                                            <span class="tipo">Id: <%= pokemon.numero %></span>
                                            <p><%= pokemon.descricao %></p>
                                            <p>Altura: <%= pokemon.altura %></p><p>Peso: <%= pokemon.peso %></p>
                                            <p>Categoria: <%= pokemon.categoria %></p><p>Habilidade: <%= pokemon.habilidade %></p>
                                            <!-- botões para editar e deletar um card -->
                                            <a href="/editar/<%= pokemon.id %>" class="add-cart-btn">Editar</a>
                                            <a href="/deletar/<%= pokedex.indexOf(pokemon) %>" class="add-wish">Deletar</a>
                                        </div>
                                    </div>
                                </div>
                            </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>
        <!-- scripts usados fora do script main -->
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- script para adicionar o botão de next e prev do banner -->
        <script src="./script.js"></script> <!-- script para para ativar o segundo card "popup" -->
        <script src="./scriptSlide.js"></script> <!-- script do slide do banner -->
        

    </body>

</html>