<div class="container py-5 d-flex justify-content-center">
  <div class="card bsauto-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 class="fw-bold mb-0">Untitled note</h5>
        <span class="small d-flex align-items-center gap-2" id="bsautoStatus">
          <span class="bsauto-dot bsauto-dot-idle" id="bsautoDot"></span>
          <span id="bsautoText">All changes saved</span>
        </span>
      </div>
      <textarea class="form-control" id="bsautoBody" rows="6" placeholder="Start typing...">Q3 planning notes — revisit budget line items before Thursday's review.</textarea>
      <p class="small text-muted mt-2 mb-0">Autosaves 1.2s after you stop typing.</p>
    </div>
  </div>
</div>

.bsauto-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsauto-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bsauto-dot-idle { background: #9ca3af; }
.bsauto-dot-saving { background: #f5a623; animation: bsauto-pulse 1s ease-in-out infinite; }
.bsauto-dot-saved { background: #198754; }
.bsauto-dot-failed { background: #dc3545; }
@keyframes bsauto-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#bsautoText.text-danger { color: #dc3545 !important; }
.bsauto-retry { border: none; background: none; padding: 0; color: #0d6efd; font-weight: 600; text-decoration: underline; cursor: pointer; }

const body = document.getElementById('bsautoBody');
const dot = document.getElementById('bsautoDot');
const text = document.getElementById('bsautoText');

let debounceTimer = null;
let isSaving = false;
let pendingResave = false;

function setState(state, message) {
  dot.className = 'bsauto-dot bsauto-dot-' + state;
  text.className = state === 'failed' ? 'text-danger' : '';
  text.innerHTML = message;
}

function timestamp() {
  return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}

function performSave() {
  if (isSaving) {
    // A keystroke landed while a save was already in flight — remember to
    // run one more save right after this one finishes, rather than firing
    // a second overlapping request.
    pendingResave = true;
    return;
  }
  isSaving = true;
  setState('saving', 'Saving...');

  setTimeout(() => {
    isSaving = false;
    const failed = Math.random() < 0.15;
    if (failed) {
      setState('failed', 'Failed to save &mdash; <button type="button" class="bsauto-retry" id="bsautoRetry">Retry</button>');
      document.getElementById('bsautoRetry').addEventListener('click', performSave);
    } else {
      setState('saved', 'Saved at ' + timestamp());
    }
    if (pendingResave) {
      pendingResave = false;
      performSave();
    }
  }, 800);
}

body.addEventListener('input', () => {
  setState('idle', 'Unsaved changes...');
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(performSave, 1200);
});