<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href=".\assets\css\bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Tabela</title>
</head>
<body>

<div class="container mt-3">
  <h2>Tabela de Inventário</h2>
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>Equipamento</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Roteador Central</td>
        <td><span class="badge bg-success">Online</span></td>
      </tr>
      <tr>
        <td>Servidor de Backup</td>
        <td><span class="badge bg-danger">Offline</span></td>
      </tr>
      <tr>
        <td>Servidor de Backup 2</td>
        <td><span class="badge bg-danger">Offline</span></td>
      </tr>
      <tr>
        <td>Servidor de Backup 3</td>
        <td><span class="badge bg-danger">Offline</span></td>
      </tr>
      <tr>
        <td>Servidor de Backup 4</td>
        <td><span class="badge bg-warning">Offline</span></td>
      </tr>
    </tbody>
  </table>

  <h2 class="mt-5">Resumo da Fatura</h2>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead class="table-primary">
        <tr>
          <th class="text-center">Descrição do Serviço</th>
          <th class="text-center">Vencimento</th>
          <th class="text-end">Valor (R$)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Hospedagem Cloud - Mensal</td>
          <td>10/04/2026</td>
          <td class="text-end">250,00</td>
        </tr>
        <tr>
          <td>Suporte Técnico Premium</td>
          <td>10/04/2026</td>
          <td class="text-end">150,00</td>
        </tr>
        <tr>
          <td>Licenciamento de Software</td>
          <td>15/04/2026</td>
          <td class="text-end">85,50</td>
        </tr>
      </tbody>
      <tfoot class="table-group-divider">
        <tr class="fw-bold table-light">
          <td colspan="2" class="text-end">Total a Pagar:</td>
          <td class="text-end text-primary">R$ 485,50</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
</body>
</html>