<div class="container py-5">
  <div class="row bst-shell mx-auto">
    <div class="col-3">
      <div class="nav flex-column nav-pills" id="bstTabs" role="tablist" aria-orientation="vertical">
        <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#bstProfile" type="button" role="tab">Profile</button>
        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#bstSecurity" type="button" role="tab">Security</button>
        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#bstNotifications" type="button" role="tab">Notifications</button>
        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#bstBilling" type="button" role="tab">Billing</button>
      </div>
    </div>

    <div class="col-9">
      <div class="tab-content card bst-card">
        <div class="card-body p-4">
          <div class="tab-pane fade show active" id="bstProfile" role="tabpanel">
            <h5 class="fw-bold mb-3">Profile</h5>
            <div class="mb-3">
              <label class="form-label small">Display name</label>
              <input type="text" class="form-control" value="Jordan Blake">
            </div>
            <div class="mb-2">
              <label class="form-label small d-flex justify-content-between">
                <span>Bio</span>
                <span class="text-muted" id="bstBioCount">0 / 160</span>
              </label>
              <textarea class="form-control" id="bstBio" rows="3" maxlength="160" placeholder="Tell us about yourself..."></textarea>
            </div>
          </div>

          <div class="tab-pane fade" id="bstSecurity" role="tabpanel">
            <h5 class="fw-bold mb-3">Security</h5>
            <div class="mb-3">
              <label class="form-label small">Current password</label>
              <input type="password" class="form-control" placeholder="••••••••">
            </div>
            <div class="mb-3">
              <label class="form-label small">New password</label>
              <input type="password" class="form-control" placeholder="New password">
            </div>
            <button class="btn btn-dark btn-sm">Update password</button>
          </div>

          <div class="tab-pane fade" id="bstNotifications" role="tabpanel">
            <h5 class="fw-bold mb-3">Notifications</h5>
            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" role="switch" id="bstNotifyEmail" checked>
              <label class="form-check-label" for="bstNotifyEmail">Email notifications</label>
            </div>
            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" role="switch" id="bstNotifySms">
              <label class="form-check-label" for="bstNotifySms">SMS alerts</label>
            </div>
            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" role="switch" id="bstNotifyMarketing" checked>
              <label class="form-check-label" for="bstNotifyMarketing">Marketing emails</label>
            </div>
            <p class="small text-muted mb-0" id="bstNotifySummary"></p>
          </div>

          <div class="tab-pane fade" id="bstBilling" role="tabpanel">
            <h5 class="fw-bold mb-3">Billing</h5>
            <p class="text-muted small">Current plan: <strong>Pro — $29/mo</strong></p>
            <button class="btn btn-outline-dark btn-sm">Manage subscription</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.bst-shell { max-width: 760px; }
.bst-card { border: 1px solid #eceef1; border-radius: 14px; min-height: 320px; }
#bstTabs .nav-link { color: #495057; border-radius: 8px; margin-bottom: 4px; }
#bstTabs .nav-link.active { background: #212529; color: #fff; }

const bio = document.getElementById('bstBio');
const bioCount = document.getElementById('bstBioCount');
const MAX_BIO = 160;

bio.addEventListener('input', () => {
  bioCount.textContent = bio.value.length + ' / ' + MAX_BIO;
});

const emailSwitch = document.getElementById('bstNotifyEmail');
const smsSwitch = document.getElementById('bstNotifySms');
const marketingSwitch = document.getElementById('bstNotifyMarketing');
const summary = document.getElementById('bstNotifySummary');

function updateSummary() {
  const on = [];
  if (emailSwitch.checked) on.push('email');
  if (smsSwitch.checked) on.push('SMS');
  if (marketingSwitch.checked) on.push('marketing');
  summary.textContent = on.length ? ('You will receive: ' + on.join(', ') + '.') : 'All notifications are turned off.';
}

[emailSwitch, smsSwitch, marketingSwitch].forEach(sw => sw.addEventListener('change', updateSummary));

updateSummary();