Better display of number of files in PDF

- The header bar now contains a Number of files: X dependent on the
number of files in the resource
- The File Preview header now includes a counter number if this is a
multi-page PDF
- The title of PDF file is put alongside the File Preview text in the h4

1 files changed, 6 insertions, 4 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 4db7f56..f6de740 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -18,7 +18,7 @@
             <span class="fw-bold">Resource type:</span> {{ resource.resource_type }}
           </div>
           <div class="px-2">
-            <span class="fw-bold">Number of files:</span> X NUMBER OF FILES
+            <span class="fw-bold">Number of files in this resource:</span> {{ resource.pdf_filenames|length }}
           </div>
         </div>
         <div class="d-flex flex-row justify-content-between my-3 flex-wrap">
@@ -58,9 +58,11 @@
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
       <div class="row my-4">
         <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-          <h4>File preview:</h4>
-          <p>{{ snapshot_filename|cut:".pdf" }}</p>
-
+          {% if resource.snapshot_urls.items|length > 1 %}
+          <h4>File preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }} </h4>
+          {% else %}
+          <h4>File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
+          {% endif %}
 
           <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
             <div class="carousel-inner">