<div class="container py-5 d-flex justify-content-center">
  <div class="card bssess-card">
    <div class="card-body p-4 text-center">
      <h6 class="fw-bold mb-1">Dashboard</h6>
      <p class="small text-muted mb-2">Demo session (sped up): expires after 18 seconds of inactivity.</p>
      <p class="fw-semibold mb-0" id="bssessTimer">18s remaining</p>
    </div>
  </div>
</div>

<div class="modal fade" id="bssessModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Your session is about to expire</h5>
      </div>
      <div class="modal-body">
        <p class="mb-0">You've been inactive for a while. You'll be signed out in <strong id="bssessCountdown">8</strong> seconds.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" id="bssessLogout">Log out now</button>
        <button type="button" class="btn btn-dark fw-bold" id="bssessStay">Stay signed in</button>
      </div>
    </div>
  </div>
</div>

<div class="bssess-expired d-none" id="bssessExpired">
  <div class="text-center text-white">
    <p class="fw-bold mb-2">Session expired</p>
    <button type="button" class="btn btn-light btn-sm fw-bold" id="bssessRestart">Log in again</button>
  </div>
</div>

.bssess-card { width: 340px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; position: relative; }
.bssess-expired {
  position: fixed; inset: 0; background: rgba(20,22,28,.85);
  display: flex; align-items: center; justify-content: center; z-index: 1100;
}

const TOTAL = 18;
const WARN_AT = 8;

const timerEl = document.getElementById('bssessTimer');
const modalEl = document.getElementById('bssessModal');
const modal = new bootstrap.Modal(modalEl);
const countdownEl = document.getElementById('bssessCountdown');
const expiredOverlay = document.getElementById('bssessExpired');

let remaining = TOTAL;
let interval = null;

function tick() {
  remaining--;
  if (remaining > WARN_AT) {
    timerEl.textContent = remaining + 's remaining';
  } else if (remaining > 0) {
    timerEl.textContent = remaining + 's remaining';
    countdownEl.textContent = remaining;
    if (!modalEl.classList.contains('show')) modal.show();
  } else {
    clearInterval(interval);
    modal.hide();
    expiredOverlay.classList.remove('d-none');
  }
}

function start() {
  clearInterval(interval);
  remaining = TOTAL;
  timerEl.textContent = remaining + 's remaining';
  expiredOverlay.classList.add('d-none');
  interval = setInterval(tick, 1000);
}

document.getElementById('bssessStay').addEventListener('click', () => {
  modal.hide();
  start();
});

document.getElementById('bssessLogout').addEventListener('click', () => {
  clearInterval(interval);
  modal.hide();
  expiredOverlay.classList.remove('d-none');
});

document.getElementById('bssessRestart').addEventListener('click', start);

start();