<!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" />
    <title>Pokedex</title>
  </head>

  <body class="detalhes-body">
    <header id="top-container">
      <h1 id="header">Pokédex</h1>
      <img id="pokedex-logo" src="/img/Pokédex_logo.png" alt="pokédex logo" />
      <img
        id="pokeball-logo"
        src="/img/pokeball-logo.png"
        alt="pokeball-logo"
      />
    </header>
    <nav class="menu">
      <div>
        <a href="/">Home</a>
      </div>
      <div>
        <a href="/cadastro">Cadastro</a>
      </div>
    </nav>

    <main>
      <section class="section-detalhes">
        <div id="header-detalhes">
          <h3><%= pokemon.nome %> </h3>
          <h3>.# <%= pokemon.numero %></h3>
        </div>
        <div id="imagem-detalhes">
          <img src="<%= pokemon.imagem %>" alt="pokemon-imagem" />
          <div id="descrição-atributos">
            <div id="texto-descrição">
              <h3><%= pokemon.descricao %></h3>
            </div>
            <div id="card-atributos">
              <div class="card-conteudo">
                <div>
                  <h3 style="color: #DBDBDB;">Altura:</h3>
                  <h3><%= pokemon.altura %></h3>
                </div>
                <div>
                  <h3 style="color: #DBDBDB">Categoria:</h3>
                  <h3><%= pokemon.categoria %></h3>
                </div>
              </div>
              <div class="card-conteudo">
                <div>
                  <h3 style="color: #DBDBDB">Peso:</h3>
                  <h3><%= pokemon.peso %></h3>
                </div>
                <div>
                  <h3 style="color: #DBDBDB">Habilidades:</h3>
                  <h3><%= pokemon.habilidade %></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <h3 id="tipo-detalhes">Tipo: <%= pokemon.tipo %></h3>
        <a href="/editar/<%=pokemon.id%>" id="btn-editar">Editar</a>
      </section>
    </main>
    <script src="./js/script.js"></script>
  </body>
</html>