show clipped paper snapshot in fix metadata dialog

hugo/layouts/papers/single.html

@@ -95,13 +95,18 @@
     document.getElementById("paperIdSpan").textContent = paper_params.anthology_id;
     document.getElementById("paperTitle").value = paper_params.title;
     document.getElementById("paperAbstract").value = paper_params.abstract;
+    document.getElementById("paperPDF").href = "{{ $paper.pdf }}";
+    document.getElementById("paperSnapshot").href = "https://aclanthology.org/thumb/" + paper_params.anthology_id + ".jpg";
+    document.getElementById("paperSnapshotImg").src = "https://aclanthology.org/thumb/" + paper_params.anthology_id + ".jpg";
 
     const container = document.getElementById("authorsContainer");
     container.innerHTML = "";
     paper_params.authors.forEach((author, idx) => {
       container.appendChild(createAuthorRow(author.first, author.last, author.id));
     });
 
+    refreshAuthorList();
+
     const modal = new bootstrap.Modal(document.getElementById('metadataModal'));
     modal.show();
   }
@@ -139,6 +144,7 @@
       authorsContainer.appendChild(draggedElement);
     }
     draggedElement = null;
+    refreshAuthorList();
   });
 
   function createAuthorRow(first, last, id) {
@@ -170,6 +176,7 @@
     firstName.placeholder = 'First name';
     firstName.className = 'form-control';
     firstName.value = first;
+    firstName.oninput = () => refreshAuthorList();
 
     firstNameCol.appendChild(firstName);
     grabberCol.appendChild(firstNameCol);
@@ -183,6 +190,7 @@
     lastName.placeholder = 'Last name';
     lastName.className = 'form-control';
     lastName.value = last;
+    lastName.oninput = () => refreshAuthorList();
 
     lastNameCol.appendChild(lastName);
 
@@ -200,7 +208,7 @@
     delBtn.type = 'button';
     delBtn.className = 'btn btn-sm btn-danger';
     delBtn.textContent = 'X';
-    delBtn.onclick = () => row.remove();
+    delBtn.onclick = () => { row.remove(); refreshAuthorList(); };
 
     delCol.appendChild(delBtn);
 
@@ -218,6 +226,17 @@
     container.appendChild(createAuthorRow("", "", "", ""));
   }
 
+  function refreshAuthorList() {
+    const container = document.getElementById('authorsContainer');
+    var authors = "";
+    for (authorRow of container.children) {
+      const first = authorRow.children[1].children[0].value;
+      const last = authorRow.children[2].children[0].value;
+      authors += first + "  " + last + "; "
+    }
+    document.getElementById("paperAuthorList").textContent = authors.slice(0,-2);
+  }
+
   // Drag & Drop functions for authors
   let draggedAuthor = null;
   function dragAuthor(ev) {
@@ -239,6 +258,7 @@
       } else {
         container.appendChild(draggedAuthor);
       }
+      refreshAuthorList();
     }
   }
 
@@ -357,12 +377,22 @@ <h5 class="modal-title">Correct Metadata for <span id="paperIdSpan"></span></h5>
               <small id="abstractTitleHelp" class="form-text text-muted">Correct abstract if needed. Retain XML formatting tags such as &lt;tex-math&gt;.</small>
               <textarea class="form-control" id="paperAbstract" rows="6"></textarea>
             </div>
+
+            <div class="mb-3">
+              <label class="form-label">Verification against PDF</label>
+              <small class="form-text text-muted">Ensure that the new title/authors match the snapshot below. (If there is no snapshot or it is too small, consult <a href="#" id="paperPDF">the PDF</a>.)</small>
+              <div style="height: 150px; text-align: center; overflow: hidden; position: relative;">
+                <a id="paperSnapshot" href=""><img id="paperSnapshotImg" src="" style="position: absolute; left: 0; top: -50px;"></a>
+              </div>
+              <small class="form-text text-muted">Authors concatenated from the text boxes above:</small>
+              <div class="card card-body bg-light" id="paperAuthorList"></div>
+            </div>
           </form>
         </div>
         <div class="modal-footer d-flex align-items-center">
           <div class="form-check mb-0">
             <input type="checkbox" class="form-check-input" id="pdfCorrectionCheck">
-            <label class="form-check-label" for="pdfCorrectionCheck">ALL author names, the title, and the abstract match the PDF. If paper metadata matches the PDF, but the paper should be linked to a different author page, please file an <a href="https://github.com/acl-org/acl-anthology/issues/new?assignees=anthology-assist&labels=correction%2Cmetadata&projects=&template=02-name-correction.yml&title=Author+Page%3A+%7Breplace+with+author+name%7D">author page correction</a> instead.</label>
+            <label class="form-check-label" for="pdfCorrectionCheck">ALL author names match the snapshot above—including middle initials, hyphens, and accents.</label>
           </div>
           <button type="button" class="btn btn-primary" onclick="submitMetadataCorrection()">Submit</button>
         </div>