<!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="./CSS/style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <title>Pokédex - Detalhes</title>
</head>
<body>
    <nav>
        <img src="/img/logo.png" class="img-fluid gif" alt="logo Pokédex">
        <ul>
            <li>
                <a href="index">Home</a>
            </li>
            <li>
                <a href="cadastro">Cadastro</a>
            </li>
            <li>
                <a href="detalhes">Detalhes</a>
            </li>
        </ul>
    </nav>
    <header>
        <img>
    </header>
    <main>
           <section id="cards">
           <div class="container-wrap">

                    <% pokedex.forEach((pokemon) => { %>
                    <div class="row">
                        <div class="pokemon">
                            <div class="card blue">
                                <h2 class="name"><%= pokemon.nome %></h2>
                                <span class="tipo"> Id: <%= pokemon.id %></span>
                                <img src="<%= pokemon.imagem %>" alt="" class="image">
                                <a class="popup-btn">Detalhes</a>
                            </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>
            <a href="" target="_blank"> Pokedex JWO - Todos os Direitos Reservados 2022</a>
        </p>
    </footer>
    <script src="./JS/script.js"></script>
</body>
</html>