DBE-S04/views/instrumento/lst.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 active" href="/instrumentos">
              <i class="bi bi-list-columns-reverse me-1"></i>Instrumentos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" 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="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-music-note-list text-primary me-2"></i><%= titulo %>
        </h1>
        <p class="text-muted mb-0">
          Estoque da loja cadastrado no MongoDB.
        </p>
      </div>
      <a href="/instrumentos/add" class="btn btn-primary shadow-sm">
        <i class="bi bi-plus-lg me-1"></i>Cadastrar Instrumento
      </a>
    </div>

    <!-- Tabela de Instrumentos -->
    <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
          <thead class="table-dark">
            <tr>
              <th scope="col" class="text-center" style="width: 70px;">#</th>
              <th scope="col">Nome</th>
              <th scope="col">Fabricante</th>
              <th scope="col">Tipo</th>
              <th scope="col" class="text-end">Preço</th>
            </tr>
          </thead>
          <tbody>
            <% if (instrumentos && instrumentos.length > 0) { %>
              <% for (let i = 0; i < instrumentos.length; i++) { %>
                <% const instrumento = instrumentos[i]; %>
                <tr>
                  <td class="text-center">
                    <span class="badge bg-secondary rounded-pill px-2 py-1">
                      <%= i + 1 %>
                    </span>
                  </td>
                  <td class="fw-bold text-dark">
                    <i class="bi bi-music-note text-primary me-2"></i><%= instrumento.nome %>
                  </td>
                  <td>
                    <i class="bi bi-building me-1 text-muted"></i><%= instrumento.fabricante %>
                  </td>
                  <td>
                    <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill px-3 py-2">
                      <%= instrumento.tipo %>
                    </span>
                  </td>
                  <td class="text-end fw-semibold text-success">
                    <%= formatarPreco(instrumento.preco) %>
                  </td>
                </tr>
              <% } %>
            <% } else { %>
              <tr>
                <td colspan="5" class="text-center py-5">
                  <div class="text-muted">
                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                    <p class="lead mb-3">Nenhum instrumento cadastrado no estoque no momento.</p>
                    <a href="/instrumentos/add" class="btn btn-primary">
                      <i class="bi bi-plus-lg me-1"></i>Cadastrar o primeiro instrumento
                    </a>
                  </div>
                </td>
              </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>

    <p class="text-muted text-end mt-3 mb-0">
      Quer incluir outro item?
      <a href="/instrumentos/add" class="fw-semibold">Cadastrar novo instrumento</a>
    </p>
  </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>