Fix JobList delete function

app/static/js/ResourceLists/CorpusList.js

@@ -56,7 +56,7 @@ class CorpusList extends ResourceList {
       <div class="input-field">
         <i class="material-icons prefix">search</i>
         <input id="${listSearchElementId}" class="search" type="text"></input>
-        <label for="${listSearchElementId}">Search corpus</label>
+        <label for="${listSearchElementId}">Search Corpus</label>
       </div>
       <table>
         <thead>

app/static/js/ResourceLists/JobList.js

@@ -56,7 +56,7 @@ class JobList extends ResourceList {
       <div class="input-field">
         <i class="material-icons prefix">search</i>
         <input id="${listSearchElementId}" class="search" type="text"></input>
-        <label for="${listSearchElementId}">Search job</label>
+        <label for="${listSearchElementId}">Search Job</label>
       </div>
       <table>
         <thead>
@@ -96,7 +96,37 @@ class JobList extends ResourceList {
     let listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
     switch (listAction) {
       case 'delete-request': {
-        Requests.jobs.entity.delete(itemId);
+        let values = this.listjs.get('id', itemId)[0].values();
+        let modalElement = Utils.HTMLToElement(
+          `
+            <div class="modal">
+              <div class="modal-content">
+                <h4>Confirm Job deletion</h4>
+                <p>Do you really want to delete the Job <b>${values.title}</b>? All files will be permanently deleted!</p>
+              </div>
+              <div class="modal-footer">
+                <a class="btn modal-close waves-effect waves-light">Cancel</a>
+                <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+              </div>
+            </div>
+          `
+        );
+        document.querySelector('#modals').appendChild(modalElement);
+        let modal = M.Modal.init(
+          modalElement,
+          {
+            dismissible: false,
+            onCloseEnd: () => {
+              modal.destroy();
+              modalElement.remove();
+            }
+          }
+        );
+        let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+        confirmElement.addEventListener('click', (event) => {
+          Requests.jobs.entity.delete(itemId);
+        });
+        modal.open();
         break;
       }
       case 'view': {