<div class="container py-5 d-flex justify-content-center">
  <div class="card bspaste-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">Attach a screenshot</label>
      <div class="bspaste-zone" id="bspasteZone" tabindex="0">
        <div id="bspasteEmpty">
          <p class="mb-1">&#128203;</p>
          <p class="small mb-0">Click here, then press <kbd>Ctrl</kbd>+<kbd>V</kbd> to paste an image</p>
        </div>
        <div class="d-none" id="bspastePreviewWrap">
          <img id="bspastePreview" alt="Pasted image preview">
          <button type="button" class="btn btn-sm btn-outline-danger mt-2" id="bspasteRemove">Remove</button>
        </div>
      </div>
      <p class="small text-muted mt-2 mb-0" id="bspasteStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bspaste-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bspaste-zone {
  border: 2px dashed #d1d5db; border-radius: 10px; padding: 24px;
  text-align: center; color: #6b7280; cursor: text; transition: border-color .15s, background .15s;
}
.bspaste-zone:focus { outline: none; border-color: #6366f1; background: #f8f9ff; }
#bspastePreview { max-width: 100%; max-height: 160px; border-radius: 8px; display: block; margin: 0 auto; }

const zone = document.getElementById('bspasteZone');
const empty = document.getElementById('bspasteEmpty');
const previewWrap = document.getElementById('bspastePreviewWrap');
const previewImg = document.getElementById('bspastePreview');
const status = document.getElementById('bspasteStatus');
let currentUrl = null;

function showImage(blob) {
  if (currentUrl) URL.revokeObjectURL(currentUrl);
  currentUrl = URL.createObjectURL(blob);
  previewImg.src = currentUrl;
  empty.classList.add('d-none');
  previewWrap.classList.remove('d-none');
  status.textContent = 'Image pasted (' + Math.round(blob.size / 1024) + ' KB).';
  status.className = 'small text-success mt-2 mb-0';
}

zone.addEventListener('paste', e => {
  const items = e.clipboardData ? e.clipboardData.items : [];
  const imageItem = Array.from(items).find(item => item.type.startsWith('image/'));
  if (!imageItem) {
    status.textContent = 'No image found on the clipboard — copy an image first, then paste.';
    status.className = 'small text-muted mt-2 mb-0';
    return;
  }
  const blob = imageItem.getAsFile();
  showImage(blob);
  e.preventDefault();
});

document.getElementById('bspasteRemove').addEventListener('click', () => {
  if (currentUrl) { URL.revokeObjectURL(currentUrl); currentUrl = null; }
  previewImg.src = '';
  previewWrap.classList.add('d-none');
  empty.classList.remove('d-none');
  status.textContent = '';
  zone.focus();
});