<div id="deleteAttachmentModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Delete Attachment</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete <code id="delete-attachment-name"></code>?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="delete-attachment-confirm">Confirm</button>
      </div>
    </div>
  </div>
</div>
<script>
    $(document).ready(() => {
        const $modal = $('#deleteAttachmentModal');
        const deleteAttachmentName = document.querySelector('#delete-attachment-name');
        const deleteAttachmentConfirm = document.querySelector('#delete-attachment-confirm');
        document.querySelectorAll('.delete-attachment[data-name][data-id]').forEach((elem) => {
            elem.addEventListener('click', () => {
                deleteAttachmentModal(elem.dataset.name, elem.dataset.id);
            });
        });
        deleteAttachmentConfirm.addEventListener('click', () => {
            const attachmentURL = '{% url 'attachment' 0 %}'.replace('0', deleteAttachmentConfirm.dataset.id);
            fetch(attachmentURL, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            }).then(() => {
                location.reload();
            });
        });

        function deleteAttachmentModal(name, id) {
            deleteAttachmentName.innerHTML = name;
            deleteAttachmentConfirm.dataset.id = id;
            $modal.modal('show');
        }
    });
</script>