<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <title>
        CATALOGO
    </title>
</head>

<body id="lista">
    <nav id="L">
        <a href="./"><input type="button" value="HOME" id="nav"></button></a>
        <a href="./cadastro"><input type="button" value="CADASTRO" id="nav"></button></a>
    </nav>
    <% if(message !== "") { %>
        <section id="message">
            <p><%= message %></p><span id="close">&times;</span>
        </section>
        <% } %>
    <header>
        <article id="tit">
            LISTA
        <article>
            
    </header>
    <main>
        <section id="dado">
            <% heroi.forEach(item=> { %>
                <section id="pers">
                    <a href="/detalhes/<%= item.id %>">
                        <img id="herois" src="<%=item.Imagem %>" alt="<%=item.Nome %>"></a>
                    <ul>
                        <article id="persN">
                            <li>Nome:
                                <a href="/detalhes/<%=item.id %>">
                                    <article>
                                        <%=item.Nome %>
                                    </article>
                                </a>
                            </li>
                        </article>
                    </ul>
                </section>
                <% }) %>
        </section>
    </main>
    <script src="/js/editar.js"></script>
</body>

</html>