<!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/styles.css" >
    <title>Pokedéx</title>
</head>

<body>
    <header class='head'>

    </header>

    <nav class='menu'>
        <a href='/' class='menuHome' style='background-color:#BC3232; border:3px solid #BC3232'>
            <div>
                <img src='img/pokeball1.png' width='30px' />
                <p>INÍCIO</p>
            </div>
        </a>

        <a href='/cadastro' class='menuRegister' style='color: #E0E0E0;'>
            <div>
                <img src='img/pokeball2.png' width='30px' />
                <p>CADASTRAR</p>
            </div>
        </a>
    </nav>

    <main class='body'>
        <div class='body-home'>
            <section class='card-list'>
                <% pokemons.map( pokemon => { %>
                    <a href='/detalhes/<%= pokemon.number %>' >
                        <div class='card'>
                            <b>Nº <%= pokemon.number %></b>
                            <img src='<%= pokemon.image %>' alt='pokemon-image'/>
                            <b><%= pokemon.name %></b>
                            <% if(pokemon.type2 == '') { %>
                                <p><b>Tipo</b>: <span id='<%=pokemon.type1 %>' ><%= pokemon.type1 %></span></p>
                            <% } else { %>
                                <p><b>Tipo</b>: <span id='<%=pokemon.type1 %>'><%= pokemon.type1 %></span> / <span id='<%=pokemon.type2 %>'><%= pokemon.type2 %></span></p>
                            <% } %>
                        </div>
                    </a>
                <% }) %>
            </section>
        </div>
    </main>

    <footer>
        <small>
            ©2021 Pokémon. TM, ®Nintendo.
        </small>
    </footer>
    
    <script src='/js/script.js'></script>

</body>
</html>