<!DOCTYPE html>
<html lang="pr-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>Catalogo</title>
</head>
    <body>
        <nav>
            <ul>
                <li>
                    <div id="cabeca_index">
                    <a href="/criar">Criar Novo Desenho</a>
                    <a blue=>BLUE Módulo 2</a>                    
                    </div>
                </li>
            </ul>
        </nav>

        <% if(message != "") {  %>
            <section id="message">
                <p><%= message %></p><span id="close">&times;</span>
            </section>
        <% }  %>

        <header>
            <article>
                <h2>CARTOON BLUE</h2>
            </article>
        </header>

            <section id="corpo-principal">

                <h3>DESENHOS ANTIGOS<h3>                      
                            <% catalogos.forEach(function(item) { %>
                        <section class= "principal">
                            <article id = "desenho">
                                <ul>                                
                                    <a href ="/detalhe/<%= item.id%>"><img src="<%= item.imagem%>" alt="imagem" width="200" height = "300px"</a>                                                                                                                                             
                                    <li>Nome:<%= item.nome %></li>                                    
                                    <li>Ano:<%= item.ano %></li>  
                                    <a href ="/editar/<%= item.id%>">EDITAR</a>                                                                   
                                </ul>
                                
                            </article>
                        </section>

                        <% }) %>              
                
            </section>
                <div id="marca">
                    <p><mark><strong>Conexão PA-SP / alunos ROB & ALE</strong></mark></p>
                </div>
                <script src="/public/js/script.js"></script>
    </body>
</html>