<!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>

         <% musica.forEach(item => { %>
             <section class="card">
                 <article id="catalogo">
                    <ul>
                         <li>
                             <h1>
                                <%= item.nome %> 
                            </h1>
                        </li>
                         <a href="/detalhes/<%= item.id %>">
                             <img src="<%= item.imagem %>" width=200>
                        </a>
                    </ul>
                
                 </article>
             </section>
         <% }) %> 

     </section>
    
        <section class="Sobre-nós" id="Sobre-nós">
          <div class="contanto">
            <div class="title-wrapper-about">
              <p>Conheça os melhores times do mundo</p>
              <h2>The best tames</h2>
            </div>
            <div class="sobre-conteúdo">
             </div>
              <div class="right">
                <p>
                 O futebol é o esporte mais popular do mundo e foi criado na Inglaterra, no século XVII.
                 O esporte chegou ao Brasil em 1894, trazido por Charles Miller, um jovem filho de ingleses
                 que chegou a São Paulo após realizar seus estudos na Europa. Charles trouxe consigo bolas 
                 e as regras para a prática do futebol no país.
                </p>
              </div>
            </div>
          </div>
        </section>
    
        <section id="login" class="login">
          <h2>Fazer Login!</h2>
    
          <form action="/login" method="POST">
              <div>
                  <label for="nome">Digite seu login: </label>
                  <input type="text" name="usuario" id="nome" placeholder="Digite seu nome" required>
              </div>
          
              <div>
                  <label for="senha">Digite sua senha: </label>
                  <input type="senha" name="senha" id="senha" placeholder="Digite sua senha" required>
              </div>
          
              <button type="submit"> Enter </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>
      </body>
    </html>
    <script src="/js/script.js"></script>
</body>

</html>