<div class="container py-5 d-flex justify-content-center">
  <div class="card bsimg-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold mb-0">Upload images</h5>
        <span class="badge text-bg-dark" id="bsimgCount">0 selected</span>
      </div>

      <label class="btn btn-outline-dark w-100 fw-semibold mb-3" for="bsimgInput">
        Choose images
        <input type="file" id="bsimgInput" class="d-none" accept="image/*" multiple>
      </label>

      <div class="row g-2" id="bsimgGrid"></div>
      <p class="small text-muted text-center mt-3 mb-0 d-none" id="bsimgEmpty">No images selected yet.</p>
    </div>
  </div>
</div>

.bsimg-card { width: 440px; border: 1px solid #eceef1; border-radius: 14px; }
.bsimg-thumb { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background: #f1f3f5; }
.bsimg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsimg-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bsimg-remove:hover { background: #dc3545; }

const input = document.getElementById('bsimgInput');
const grid = document.getElementById('bsimgGrid');
const countBadge = document.getElementById('bsimgCount');
const emptyMsg = document.getElementById('bsimgEmpty');

// Each entry pairs the original File with the object URL created for it, so
// that URL can be revoked individually when that specific image is removed.
let entries = [];
let nextId = 1;

function updateCount() {
  countBadge.textContent = entries.length + ' selected';
  emptyMsg.classList.toggle('d-none', entries.length > 0);
}

function render() {
  grid.innerHTML = '';
  entries.forEach(entry => {
    const col = document.createElement('div');
    col.className = 'col-4';
    col.innerHTML =
      '<div class="bsimg-thumb">' +
        '<img src="' + entry.url + '" alt="' + entry.file.name + '">' +
        '<button type="button" class="bsimg-remove" data-id="' + entry.id + '" aria-label="Remove image">&times;</button>' +
      '</div>';
    grid.appendChild(col);
  });
  updateCount();
}

input.addEventListener('change', () => {
  Array.from(input.files).forEach(file => {
    if (!file.type.startsWith('image/')) return;
    const url = URL.createObjectURL(file);
    entries.push({ id: nextId++, file, url });
  });
  input.value = '';
  render();
});

grid.addEventListener('click', e => {
  const btn = e.target.closest('.bsimg-remove');
  if (!btn) return;
  const id = Number(btn.dataset.id);
  const entry = entries.find(en => en.id === id);
  if (entry) {
    // Releasing the object URL frees the browser-held reference to the
    // in-memory blob as soon as its thumbnail is no longer shown.
    URL.revokeObjectURL(entry.url);
  }
  entries = entries.filter(en => en.id !== id);
  render();
});

updateCount();