<p>
    <a 
      href="#" 
      class="btn btn-danger"
      data-bs-toggle="modal"
      data-bs-target="#hapusModal"
      data-bs-link="/berita/hapus/34"
      data-bs-headline="Olimpiade Paris 2024 Dibuka"
    >
      Hapus Artikel 1
    </a>
</p>
<p>
    <a 
      href="#" 
      class="btn btn-danger"
      data-bs-toggle="modal"
      data-bs-target="#hapusModal"
      data-bs-link="/berita/hapus/12"
      data-bs-headline="Piala Eropa 2024 Ditutup"
    >
      Hapus Artikel 2
    </a>
</p>

<!-- Modal Begins -->
<div class="modal fade" id="hapusModal"
    tabindex="-1"
    aria-labelledby="hapusModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Konfirmasi Penghapusan</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<!-- Modal Ends -->

var hapusModal = document.getElementById('hapusModal')
hapusModal.addEventListener('show.bs.modal', function (event) {
  // Tombol yang memicu modal
  var button = event.relatedTarget
  // Ambil info dari atribut-atribut data-bs-*
  var link = button.getAttribute('data-bs-link')
  var headline = button.getAttribute('data-bs-headline')
  // Update isi modal.
  var modalBody = hapusModal.querySelector('.modal-body')
  var modalLink = hapusModal.querySelector('.modal-footer')

  modalBody.textContent =
    'Anda akan menghapus artikel berjudul `'
    + headline
    + '`. Apakah Anda yakin?'
  modalLink.innerHTML =
    '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>'
    + '<a class="btn btn-danger" href="'
    + link
    + '">Hapus</a>';
})