<div class="container py-5 d-flex justify-content-center">
  <div class="card bsqueue-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <label class="form-label small fw-semibold mb-0">Upload files</label>
        <span class="small text-muted" id="bsqueueSummary"></span>
      </div>
      <input type="file" class="form-control mb-3" id="bsqueueInput" multiple>
      <ul class="list-unstyled mb-0" id="bsqueueList"></ul>
    </div>
  </div>
</div>

.bsqueue-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsqueue-row { padding: 8px 0; border-bottom: 1px solid #f1f2f5; }
.bsqueue-row:last-child { border-bottom: none; }
.bsqueue-row .progress { height: 6px; }
#bsqueueList .bg-danger { background-color: #dc3545 !important; }

const input = document.getElementById('bsqueueInput');
const list = document.getElementById('bsqueueList');
const summary = document.getElementById('bsqueueSummary');

let files = [];
let seq = 0;

function updateSummary() {
  const done = files.filter(f => f.status === 'done').length;
  summary.textContent = files.length ? done + ' of ' + files.length + ' uploaded' : '';
}

function renderRow(f) {
  const row = document.getElementById('bsqueue-row-' + f.id);
  if (!row) return;
  row.querySelector('.bsqueue-pct').textContent =
    f.status === 'done' ? 'Done' : f.status === 'failed' ? 'Failed' : Math.round(f.progress) + '%';
  const bar = row.querySelector('.progress-bar');
  bar.style.width = f.progress + '%';
  bar.classList.toggle('bg-danger', f.status === 'failed');
  row.querySelector('.bsqueue-action').textContent = f.status === 'uploading' ? 'Cancel' : 'Remove';
  updateSummary();
}

function runUpload(f) {
  f.status = 'uploading';
  f.progress = 0;
  f.timer = setInterval(() => {
    f.progress += Math.random() * 20;
    if (f.progress >= 100) {
      f.progress = 100;
      f.status = 'done';
      clearInterval(f.timer);
    }
    renderRow(f);
  }, 220);
}

function addFiles(fileList) {
  Array.from(fileList).forEach(file => {
    const f = { id: seq++, file, progress: 0, status: 'queued', timer: null };
    files.push(f);
    const li = document.createElement('li');
    li.className = 'bsqueue-row';
    li.id = 'bsqueue-row-' + f.id;
    li.innerHTML =
      '<div class="d-flex justify-content-between small mb-1">' +
      '<span class="text-truncate" style="max-width:220px">' + file.name + '</span>' +
      '<span class="bsqueue-pct text-muted">0%</span></div>' +
      '<div class="progress mb-1"><div class="progress-bar" style="width:0%"></div></div>' +
      '<button type="button" class="btn btn-link btn-sm p-0 bsqueue-action" data-id="' + f.id + '">Cancel</button>';
    list.appendChild(li);
    runUpload(f);
  });
  updateSummary();
}

input.addEventListener('change', () => {
  if (input.files.length) addFiles(input.files);
  input.value = '';
});

list.addEventListener('click', e => {
  const btn = e.target.closest('.bsqueue-action');
  if (!btn) return;
  const id = Number(btn.dataset.id);
  const f = files.find(x => x.id === id);
  if (!f) return;

  if (f.status === 'uploading') {
    clearInterval(f.timer);
    f.status = 'failed';
    renderRow(f);
  } else {
    clearInterval(f.timer);
    files = files.filter(x => x.id !== id);
    document.getElementById('bsqueue-row-' + id).remove();
    updateSummary();
  }
});