<!DOCTYPE html>
<html lang="en">
<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/stylepaises.css">

    <title>Detalhes</title>
</head>

<body>
    
    <nav>
        <a class="logo" href="/">Home</a>
        <a class="logo" href="/quemsomos">Quem Somos</a>
        <a class="logo" href="/sobre">Sobre</a>
        <a class="logo" href="/cadastro">Cadastrar</a>
    </nav>

    <header>
        <h1><%= paises.nome %></h1>
    </header>
    
    <section id="detalhes">
       
        <img src="<%= paises.bandeira %>" alt="">
        <div id="infos">       
            
            <p>
                <%= paises.informacoes %>
            </p> 
            
            <div>
                 <h4>Capital:</h4>
                 <h3><%= paises.capital %> </h3>
            </div>            
            <div>
                <h4>Extensão:</h4>
                <h3><%= paises.extensao %></h3>
            </div>    
            <div>
                <h4>População:</h4>
                <h3><%= paises.populacao %></h3>
            </div>     
            <div>
                <h4>Lingua Oficial:</h4>
                <h3><%= paises.lingua_oficial %></h3>
           </div>
           <div> 
                <h4>Moeda:</h4>
                 <h3><%= paises.moeda %></h3>
            </div>
            <!-- <button class="botao"></button> -->
            <a href="/deletar/<%= paises.id %>" class="botao botao-d">DELETAR!</a>
            <a href="/editar/<%= paises.id %>" class="botao botao-d">EDITAR!</a>
        </div>
  

    </section>

    <script src="/js/script.js"></script>
</body>
</html>