<!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>
    <header class='head'>
        <% if(message != "") {  %>
            <section id="message">
                <p><%= message %></p>
                <span id="close">&times;</span>
            </section>
        <% }  %>
        <a href="https://github.com/JohnSulliman/pokedex-crud" class='githubImage'>
            <img src='../img/eevee.gif' width='70rem' alt='eevee' />
            <img src='../img/github.png' width='60rem'/>
        </a>
    </header>

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

    <main class='body'>
        <div class='body-infos'>
            <h2>
                <%= pokemon.name %>  
            </h2>
            <section class='infos'>
                <div class='infos1'>
                    <img src='<%= pokemon.image%>' width='400px' />
                </div>
                    
                <div class='infos2'>
                    <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.sex == '') { %>
                        <p><b>Sexo:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Sexo:</b> <%=pokemon.sex %></p>
                    <% } %>
                    <% if(pokemon.category == '') { %>
                        <p><b>Categoria:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Categoria:</b> <%=pokemon.category %></p>
                    <% } %>
                    <% if(pokemon.skills == '') { %>
                        <p><b>Habilidade:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Habilidade:</b> <%=pokemon.skills  %></p>
                    <% } %>
                    <% if(pokemon.strong == '') { %>
                        <p><b>Forte:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Forte</b>: <span id='<%=pokemon.strong %>' ><%= pokemon.strong %></span></p>
                    <% } %>
                    <% if(pokemon.weak == '') { %>
                        <p><b>Fraco:</b> (Não especificado) </p>
                    <% } else { %>
                        <p><b>Fraco</b>: <span id='<%=pokemon.weak%>' ><%= pokemon.weak %></span></p>
                    <% } %>
                </div>

            </section>
            <div class='infos3'>
                <% region.map (regions => { %>
                    <h2>Região: <%= regions.region_name %></h2>
                    <img src='<%= regions.region_image%>' alt='<%= regions.region_name %>' width='450rem' />
                    <small>*<%=regions.region_image_description %></small>
                <% }) %>
                <div class='infos3-descriptionRegion'>
                    <% region.map (regions => { %>
                        <p><%=regions.region_description %></p>
                    <% }) %>
                </div>
            </div>

            <div class='infoButtons'>
                <a href='/editar/<%= pokemon.number %>'>
                    <button class='editButton'>
                        EDITAR
                    </button>
                </a>

                <a href='/deletar/<%= pokemon.number %>'>
                    <button class='deleteButton'>
                        DELETAR
                    </button>
                </a>
            </div>
        </div>
    </main>

    <footer>
        <small>
            ©2021 Pokémon. TM, ®Nintendo.
        </small>
    </footer>

    <script src='/js/script.js'></script>

</body>
</html>