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

  <body>
    <nav>
      <ul id="menu">
        <div id="indice">
          <li><a href="#btnCadastrar">Cadastrar</a></li>
        </div>

        <div id="indice">
          <li><a href="#Cards">Instrumentos</a></li>
        </div>
      </ul>
    </nav>

    <h1 id="h1">Mundo dos instrumentos, o maior site de vendas do Brasil!</h1>
    <header>
      <img
        id="imghd"
        src="http://oacustico.com.br/blog/wp-content/uploads/2016/06/DSC07913.jpg"
        alt=""
      />
    </header>

    <main>
      <h2>Instrumentos Dispon√≠veis</h2>

      <section id="cards">
        <% instrumentos.forEach( (instru) =>{ %>
        <div class="card">
          <h1 id="Cards"><%=instru.nome%></h1>
          <img src="<%=instru.imagem%>" alt="imagem" />
          <p><%=instru.valor%></p>

          <a id="instru" href="/descricao/<%= instru.Id %>">Detalhes</a>
          <a id="instru" href="/atualizar/<%= instru.Id %>">Atualizar</a>
          <a id="instru" href="/remover/<%= instru.Id %>">Remover</a>
        </div>

        <% })%>
      </section>

      <section id="cadastro">
        <h2>Cadastro</h2>

        <form action="/add" method="POST">
          <label for="nome">Nome:</label>
          <input type="text" id="nome" name="nome" required />

          <label for="cor">Cor:</label>
          <input type="text" id="cor" name="cor" required />

          <label for="DataDeFabricacao">Data de Fabricacao:</label>
          <input
            type="text"
            id="data de fabricacao"
            name="DataDeFabricacao"
            required
          />

          <label for="valor">Valor</label>
          <input type="text" id="valor" name="valor" required />

          <label for="caracteristica">caracteristica</label>
          <input
            type="text"
            id="caracteristica"
            name="caracteristica"
            required
          />

          <label for="imagem">Link da Imagem</label>
          <input type="text" id="imagem" name="imagem" required />

          <label for="FormaDePagamento">Forma de pagamento</label>
          <input
            type="text"
            id="FormaDePagamento"
            name="FormaDePagamento"
            required
          />

          <button id="btnCadastrar" type="submit">Cadastrar</button>
        </form>
      </section>
    </main>

    <footer>
      <p>
        <a href="http://www.blueedtech.com.br" target="_blank"
          >www.blueedtech.com.br</a
        >
        <br />-Todos os direitos reservados.
      </p>
    </footer>
  </body>
</html>
