<!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">
    <title>TheBest</title>
    <link rel="icon" type = " image / jpg " href="https://cdn-icons-png.flaticon.com/512/53/53205.png">
    <link rel="stylesheet" href="/css/style.css">
  </head>
   
<body>
    <header>
      <div class="content">
        <nav>
          <p class="brand">the<strong>Best</strong></p>
          <ul>
            <li><a href="#catalogo">Times</a></li>
            <li><a href="#about">Sobre nós</a></li>
            <li><a href="/criar">Cadastrar novos times</a></li>
            <li><a  href="#login"><button>Login</button></a></li>
          </ul>
        </nav>
        <div class="header-block">
          <div class="text">
            
            <h2>The time best</h2>
            <h1>Maiores times do mundo</h1>

          </div>
        </div>
      </div>
    </header>

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

  <section id="esp">
    <h1>espaço</h1>
  </section>

  <section id="cursos">
    <% musica.forEach(item => { %>
        <section class="card">
            <article id="catalogo">
               <ul>
                    <li>Nome: <%= item.nome %></li>
                    <li>Descrição:</li>
                    <a href="/detalhes/<%= item.id %>">
                        <img src="<%= item.imagem %>" width=200>
                    </a>
                </ul>
                    <a href = "/editar/<%= item.id %>">Editar</a>
                    <a href = "/deletar/<%= item.id %>">Deletar</a>
            </article>
        </section>
    <% }) %> 
</section>

     <section class="about" id="about">
        <div class="content">
          <div class="title-wrapper-about">
            <h4>Conheça os melhores times do mundo</h4>
            <h3>The best tames</h3>
          </div>
          <div class="about-content">
            <div class="left">
              <img src="https://www.historiadetudo.com/wp-content/uploads/2015/03/historia-do-futebol.jpg" alt="About" alt="134" height="180";/>
            </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="/login"> Enter </button>
      </form>
  </section>

    <footer>
      <div class="main">
        <% musica.forEach(item => { %>
          <ul>
            <img src="<%= item.imagem %>" width=200 height="200">
          </ul>
        <% }) %> 
        </div>
      <div class="last">the best time 2021 - Sembre online</div>
    </footer>
  </body>
</html>