<!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">
    <link rel="shortcut icon" type="imagex/png" href="/img/car-small.ico">
    <title>Listagem</title>
</head>
<body>

    <header>
        <nav>          
            <a class="botao" href="index">Home</a>

            <a class="botao" href="cadastro">Cadastro</a>
            
            <a class="botao" href="detalhes">Detalhes</a>
                
            <a class="botao" href="edicao">Edição</a>     
        </nav>
    </header>
       
    <article>
        <h2>Sua seleção de carros dos sonhos!</h2>
        <p>Aqui está uma lista pré selecionada de alguns carros aos quais eu amaria ter.
        Fique a vontade para alterar ou excluir, para isso use o menu de navegação na parte superior da página.
        </p>
    </article>

    <% carros.forEach(item => { %>
        <section id="lista">
        <ul>
           <li>Id: <%= item.id %></li>
           <li>Nome: <%= item.nome %></li>
            <li>Marca: <%= item.marca %></li>
            <li>Ano: <%= item.ano %></li>
            <li><img class="img" src="<%= item.imagem %>"/></li>
        </ul>
      </section>
      <% }); %>
        

</body>
</html>