<!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/Detalhes</title>
</head>
<body>
    <nav id='navbar'>
        <a href="https://github.com/JohnSulliman/pokedex-mvc" class='githubImage'>
            <img src='../img/eevee.gif' width='70rem' alt='eevee' />
            <img src='../img/github.png' width='60rem'/>
        </a>
    </nav>

    <header>
        <div class='backButton'>
            <a href='/'>
                <img src='../img/pokebola.png' width='35px' alt='pokebola'/>
            </a>

            <img src='../img/back.png' width='60px' alt='back-button' />
        </div>
    </header>

    <section class='body'>
        <% pokemons.map( pokemon => { %>
            <h3>
                <%= pokemon.name %>
            </h3>
        <% }) %>
        <section class='card-details'>
            <% pokemons.map( pokemon => { %>

                <div class='details-image'>
                    <img src="<%= pokemon.image%>" />
                </div>

                <div class='details-infos'>
                    <p><b>Nº :</b> <%=pokemon.number %></p>

                    <% 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>
                    <% } %>

                    <% if(pokemon.description == '') { %>
                        <p><b>Descrição:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Descrição:</b> <%=pokemon.description %></p>
                    <% } %>

                    <% if(pokemon.height == '') { %>
                        <p><b>Altura:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Altura:</b> <%=pokemon.height %> m</p>
                    <% } %>

                    <% if(pokemon.weight == '') { %>
                        <p><b>Peso:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Peso:</b> <%=pokemon.weight %> kg</p>
                    <% } %>

                    <% if(pokemon.category == '') { %>
                        <p><b>Categoria:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Categoria:</b> <%=pokemon.category %></p>
                    <% } %>

                    <% if(pokemon.abilities == '') { %>
                        <p><b>Habilidade:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Habilidade:</b> <%=pokemon.abilities  %></p>
                    <% } %>
                </div>
            <% }) %>
        </section>
    </section>

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