<div class="container py-5 d-flex justify-content-center">
  <div class="card bsdeploy-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="fw-bold mb-0">Deploy #482</h6>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bsdeployRestart">Restart demo</button>
      </div>
      <div class="bsdeploy-stages" id="bsdeployStages"></div>
      <p class="small mt-3 mb-0" id="bsdeployStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bsdeploy-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsdeploy-stages { display: flex; flex-direction: column; gap: 4px; }
.bsdeploy-stage { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.bsdeploy-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font: 700 11px sans-serif;
  background: #eceef3; color: #9ca3af;
}
.bsdeploy-stage-done .bsdeploy-dot { background: #198754; color: #fff; }
.bsdeploy-stage-active .bsdeploy-dot { background: #f5a623; color: #fff; animation: bsdeploy-pulse 1s ease-in-out infinite; }
.bsdeploy-stage-failed .bsdeploy-dot { background: #dc3545; color: #fff; }
@keyframes bsdeploy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.bsdeploy-name { font-size: 13px; font-weight: 600; }
.bsdeploy-stage-pending .bsdeploy-name { color: #9ca3af; font-weight: 500; }

const STAGES = ['Build', 'Test', 'Staging', 'Production'];
// This attempt is scripted to fail at Staging so the failure/retry path is
// always reachable in this preview; a real pipeline's outcome per stage
// would come from actual CI/CD job results instead.
const FAIL_AT = 2;

const container = document.getElementById('bsdeployStages');
const status = document.getElementById('bsdeployStatus');
let stageStatus = STAGES.map(() => 'pending');
let timer = null;

function render() {
  container.innerHTML = STAGES.map((name, i) => {
    const st = stageStatus[i];
    const icon = st === 'done' ? '\u2713' : st === 'failed' ? '\u2715' : String(i + 1);
    return '<div class="bsdeploy-stage bsdeploy-stage-' + st + '">' +
      '<div class="bsdeploy-dot">' + icon + '</div>' +
      '<div class="bsdeploy-name">' + name + '</div>' +
    '</div>';
  }).join('');
}

function run(attempt) {
  clearInterval(timer);
  stageStatus = STAGES.map(() => 'pending');
  render();
  status.textContent = 'Deploying...';
  status.className = 'small mt-3 mb-0 text-muted';

  let i = 0;
  stageStatus[0] = 'active';
  render();

  timer = setInterval(() => {
    const failing = i === FAIL_AT && attempt === 1;
    stageStatus[i] = failing ? 'failed' : 'done';

    if (failing) {
      clearInterval(timer);
      render();
      status.innerHTML = STAGES[i] + ' failed. <button type="button" class="btn btn-sm btn-link p-0" id="bsdeployRetry">Retry deploy</button>';
      status.className = 'small mt-3 mb-0 text-danger fw-semibold';
      document.getElementById('bsdeployRetry').addEventListener('click', () => run(attempt + 1));
      return;
    }

    i++;
    if (i >= STAGES.length) {
      clearInterval(timer);
      render();
      status.textContent = 'Deployed to Production.';
      status.className = 'small mt-3 mb-0 text-success fw-semibold';
      return;
    }

    stageStatus[i] = 'active';
    render();
  }, 900);
}

document.getElementById('bsdeployRestart').addEventListener('click', () => run(1));
run(1);