DBE-S04/views/instrumento/add.ejs

<!-- Anderson Valadares Pinto (20251PL.TSIAD0018) [SLS] -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= titulo %> | Loja de Instrumentos</title>
  <!-- Bootstrap 5 CSS via CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #f8f9fa;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    footer {
      margin-top: auto;
    }
  </style>
</head>
<body>
  <!-- Barra de Navegação -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a class="navbar-brand fw-bold" href="/instrumentos">
        <i class="bi bi-music-note-beamed text-warning me-2"></i>Loja de Instrumentos
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="/instrumentos">
              <i class="bi bi-list-columns-reverse me-1"></i>Instrumentos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="/instrumentos/add">
              <i class="bi bi-plus-circle me-1"></i>Cadastrar
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Conteúdo Principal -->
  <main class="container my-5">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
          <div>
            <h1 class="h2 fw-bold mb-1">
              <i class="bi bi-plus-square-fill text-primary me-2"></i><%= titulo %>
            </h1>
            <p class="text-muted mb-0">Preencha os dados para adicionar o instrumento ao estoque.</p>
          </div>
          <a href="/instrumentos" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Voltar à Listagem
          </a>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4 p-md-5">
            <% if (erro) { %>
              <div class="alert alert-danger d-flex align-items-start gap-2" role="alert">
                <i class="bi bi-exclamation-triangle-fill fs-5"></i>
                <div>
                  <strong>Não foi possível cadastrar.</strong><br>
                  <%= erro %>
                </div>
              </div>
            <% } %>

            <form method="POST" action="/instrumentos">
              <div class="mb-3">
                <label for="nome" class="form-label fw-semibold">Nome</label>
                <input
                  type="text"
                  class="form-control"
                  id="nome"
                  name="nome"
                  required
                  maxlength="120"
                  autocomplete="off"
                  placeholder="Ex.: Guitarra Elétrica Stratocaster"
                  value="<%= valores.nome || '' %>"
                  <%= erro ? '' : 'autofocus' %>
                >
              </div>

              <div class="row g-3">
                <div class="col-md-6">
                  <label for="fabricante" class="form-label fw-semibold">Fabricante</label>
                  <input
                    type="text"
                    class="form-control"
                    id="fabricante"
                    name="fabricante"
                    required
                    maxlength="120"
                    autocomplete="off"
                    placeholder="Ex.: Fender"
                    value="<%= valores.fabricante || '' %>"
                  >
                </div>

                <div class="col-md-6">
                  <label for="tipo" class="form-label fw-semibold">Tipo</label>
                  <select class="form-select" id="tipo" name="tipo" required>
                    <option value="">Selecione...</option>
                    <% tipos.forEach((tipo) => { %>
                      <option value="<%= tipo %>" <%= valores.tipo === tipo ? 'selected' : '' %>><%= tipo %></option>
                    <% }) %>
                  </select>
                </div>

                <div class="col-md-6">
                  <label for="preco" class="form-label fw-semibold">Preço (R$)</label>
                  <input
                    type="number"
                    class="form-control"
                    id="preco"
                    name="preco"
                    required
                    min="0"
                    step="0.01"
                    inputmode="decimal"
                    placeholder="0.00"
                    value="<%= valores.preco || '' %>"
                  >
                  <div class="form-text">
                    Use ponto para os centavos — por exemplo, <code>1499.90</code>.
                  </div>
                </div>
              </div>

              <div class="d-flex flex-wrap gap-2 pt-4">
                <button type="submit" class="btn btn-primary px-4 shadow-sm">
                  <i class="bi bi-check2-circle me-1"></i>Cadastrar Instrumento
                </button>
                <a href="/instrumentos" class="btn btn-outline-secondary px-4">
                  <i class="bi bi-x-lg me-1"></i>Cancelar
                </a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Rodapé -->
  <footer class="bg-dark text-white-50 text-center py-4 border-top">
    <div class="container">
      <p class="mb-0">Desenvolvimento Back-End (DBE) &bull; Semana 04 &bull; Cadastro e Listagem de Instrumentos com Express, EJS e MongoDB</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>