<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fullbleed Init Smoke: Bootstrap + Inter + Icons</title>
</head>
<body>
  <svg aria-hidden="true" width="0" height="0" style="position:absolute;left:-9999px;top:-9999px;overflow:hidden">
    {{ICON_SYMBOLS}}
  </svg>

  <div class="container-fluid fb-shell">
    <div class="card shadow-sm border-0 mb-3">
      <div class="card-body py-3">
        <div class="row align-items-center">
          <div class="col">
            <h1 class="h3 mb-1">Init Vendoring Smoke Check</h1>
            <p class="text-muted mb-0">Bootstrap 5.0.0 + Inter + Bootstrap Icons sprite</p>
          </div>
          <div class="col-auto">
            <span class="badge bg-primary p-2">TECHNICAL EVAL</span>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-4">
        <div class="fb-kpi card border-0 shadow-sm">
          <div class="card-body py-3">
            <div class="text-uppercase small text-muted">Bootstrap</div>
            <div class="fs-4 fw-bold">Loaded</div>
            <div class="small text-muted">Grid + card + table + buttons</div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="fb-kpi card border-0 shadow-sm">
          <div class="card-body py-3">
            <div class="text-uppercase small text-muted">Font</div>
            <div class="fs-4 fw-bold">Inter</div>
            <div class="small text-muted">Vendored variable TTF</div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="fb-kpi card border-0 shadow-sm">
          <div class="card-body py-3">
            <div class="text-uppercase small text-muted">Icons</div>
            <div class="fs-4 fw-bold">Sprite</div>
            <div class="small text-muted">Bootstrap Icons 1.11.3</div>
          </div>
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pb-0">
        <h2 class="h5 mb-1">A) Inline Sprite Symbols (expected path)</h2>
        <p class="small text-muted mb-2">Symbols are extracted from the vendored sprite and referenced by local fragment IDs.</p>
      </div>
      <div class="card-body pt-0">
        <div class="icon-grid">
          {{ICON_GRID_INLINE}}
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pb-0">
        <h2 class="h5 mb-1">B) External Sprite Fragment Hrefs (compat probe)</h2>
        <p class="small text-muted mb-2">Uses <code>vendor/icons/bootstrap-icons.svg#icon-id</code> directly inside <code>&lt;use href&gt;</code>.</p>
      </div>
      <div class="card-body pt-0">
        <div class="icon-grid">
          {{ICON_GRID_EXTERNAL}}
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pb-0">
        <h2 class="h5 mb-1">C) Expanded Symbol SVG (fallback path)</h2>
        <p class="small text-muted mb-2">Builds inline <code>&lt;svg&gt;</code> per icon from the vendored sprite's symbol path data (no external fragment references).</p>
      </div>
      <div class="card-body pt-0">
        <div class="icon-grid">
          {{ICON_GRID_EXPANDED}}
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pb-0">
        <h2 class="h5 mb-1">Bootstrap Component Probe</h2>
      </div>
      <div class="card-body pt-0">
        <table class="table table-sm align-middle mb-3">
          <thead>
            <tr>
              <th>Check</th>
              <th>Status</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Grid + spacing classes</td>
              <td><span class="badge bg-success">Applied</span></td>
              <td>Container + row + col + utilities are visible.</td>
            </tr>
            <tr>
              <td>Button styling</td>
              <td><button class="btn btn-primary btn-sm">Primary</button></td>
              <td>Rounded corner, background, and text style from Bootstrap.</td>
            </tr>
            <tr>
              <td>Inter font rendering</td>
              <td><span class="fw-bold">Applied</span></td>
              <td>Body and headings use vendored Inter family.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="alert alert-secondary py-2 mb-0" role="alert">
      Missing requested symbols: <strong>{{MISSING_SYMBOLS}}</strong><br>
      Run timestamp (UTC): <strong>{{RUN_TS}}</strong>
    </div>
  </div>
</body>
</html>
