<!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>Times</title>
</head>

<body>
    <% if(message != "") {  %>
        <section id="message">
            <p><%= message %></p> <span id="close">&times;</span>
        </section>
    <% }  %>
    <nav>
        <p class="brand">The<strong>Best</strong></p>
        <ul>
            <li>
                <li><a href="#cursos">Times</a></a></li>
                <li><a href="#Sobre-nós">Sobre nós</a></li>
                <li><a  href="#login"><button>Login</button></a></li>
            </li>
        </ul>
    </nav>

    <header>
        <article>
            <h1><%= titulo %></h1>
            <p>Maiores times do mundo</p>
        </article>
        <img src="https://s2.glbimg.com/HrbLzUkTzg487X8ypzap3DQgg7E=/0x0:2909x1593/600x0/smart/filters:gifv():strip_icc()/i.s3.glbimg.com/v1/AUTH_bc8228b6673f488aa253bbcb03c80ec5/internal_photos/bs/2021/N/6/OueIWxRhibeIU6IBoAww/americadosul.png" class="img-fluid gif" alt="Banner">
    </header>

    <section id="cursos" class='cursos'>
        <h1>Lista de Times:</h1>

    <% if(message != "") {  %>
        <section id="message">
            <p><%= message %></p> <span id="close">&times;</span>
        </section>
    <% }  %>
    
    <% if(musica != null) {  %>
        
        <section id="inscrever">
     
            <form action="/editar/<%= musica.id %>" method="POST">
                <div>
                    <label for="nome">Time: </label>
                    <input type="text" name="nome" id="nome" placeholder="Digite o nome do time" value="<%= musica.nome %>">
                </div>
            
                <div>
                    <label for="descricao">Digite a descrição do time: </label>
                    <input type="text" name="descricao" id="descricao" placeholder="Digite a descrição do time" value="<%= musica.descricao %>">
                </div>
    
                <div>
                    <label for="imagem">Coloque o link para a imagem do time: </label>
                    <input type="text" name="imagem" id="imagem" placeholder="Link da imagem" value="<%= musica.imagem %>">
                </div>
            
                <button type="submit">Editar</button>
            </form>
        </section>

    <% }  %>
    <footer>
        <div class="main">
          <% musica.forEach(item => { %>
            <ul>
              <img src="<%= item.imagem %>" width=200 height="200">
            </ul>
          <% }) %> 
          </div>
          <p>
              < The time best /> <a href="#cursos" target="_blank"> Times</a>
          </p>
      </footer>
    <script src="/js/script.js"></script>
</body>

</html>