<!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/detalhes.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <title>Projeto 03 Módulo 2</title>
</head>
  
<body>

    


  
  <main>

    <header>
        <a href="/">
        <img id = 'logo' src='../img/logo cdz.png' alt='logo cdz'>
        </a>       
      </header>
    

      <h1 id ='subtitulo'>Detalhes do cavaleiro</h1>

        <section id='cards'>
          <a href="/editar/ <%= personagem.id %>">
           <div class = 'icone'>Editar           
              <i class="bi bi-pencil-fill"></i>            
           </div>
          </a>

          <a href= "/apagar/<%= personagem.id %>">
           <div class = 'icone'>Apagar            
            <i class="bi bi-trash3-fill"></i>              
           </div>
          </a>

          <div id ='<%= personagem.id %>' class='card'>
            
            <div id='cardFront'>
                
                <h2 class ='nome'> <%= personagem.nome %> </h2>
                <img src="<%= personagem.imagem %>" alt = 'cavaleiro'>
                
                <h2 class = classificaçao ><%=personagem.classificaçao  %></h2>
                <h2 class = armadura> Armadura: <%=personagem.armadura  %></h2>
                <h2 class = cosntelaçao> Constelação: <%=personagem.constelaçao  %></h2>
                <h2 class = divindade>Divindade: <%=personagem.divindade %></h2>
                  
                  <p class = aniversario >Aniversário: <%= personagem.aniversario %> </p>
                  <p class = signo>Signo: <%= personagem.signo %></p>
                  <p class = habilidade>Golpe Especial: <%= personagem.habilidade %></p>
  </div>

            <div id='cardBack'>
              <p class = 'descriçao'><%= personagem.descriçao %></p>
            </div>  
                                  
          </div>                          
                       
        </section>

        <footer><p>Este é um projeto criado por Guilherme Macedo.</p></footer>

  </main>

</body>
</html>


      
        