From 0cf3d3703a49f6fccda0966090536f2a9386a5a6 Mon Sep 17 00:00:00 2001
From: rivalee <r.e.cottrell@gmail.com>
Date: Wed, 24 Dec 2025 11:57:57 +0000
Subject: [PATCH] Add image troubleshooting include and update two pages where
 it should show

---
 .../images/image-troubleshooting.njk          | 51 +++++++++++++++++++
 app/views/events/images-automatic.html        |  2 +
 .../events/images-before-mammography.html     |  9 +---
 3 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 app/views/_includes/images/image-troubleshooting.njk

diff --git a/app/views/_includes/images/image-troubleshooting.njk b/app/views/_includes/images/image-troubleshooting.njk
new file mode 100644
index 00000000..6f88c6d3
--- /dev/null
+++ b/app/views/_includes/images/image-troubleshooting.njk
@@ -0,0 +1,51 @@
+{% from "details/macro.njk" import details %}
+{% from "button/macro.njk" import button %}
+
+<div class="nhsuk-expander-group">
+  {% call details({
+    summaryText: "Image troubleshooting",
+    classes: "nhsuk-expander"
+  }) %}
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        <h2>There are too few or too many images</h2>
+        <ul>
+          <li>Wait 15 seconds</li>
+          <li>Resend images from mammogram machine</li>
+        </ul>
+
+        {{ button({
+          text: "Resend images from mammogram machine",
+          href: "#",
+          classes: "app-button--small"
+        }) }}
+
+        <p>or</p>
+
+        <p><a href="./images-manual" class="nhsuk-link">Record image information manually</a></p>
+
+        <h2>Images are blurred or obstructed</h2>
+        <ul>
+          <li>Retake the necessary image views</li>
+          <li>The new images will appear above (refresh image information if they do not)</li>
+        </ul>
+
+        <h2>Images are incorrectly labelled (views or participant info)</h2>
+        <ul>
+          <li>Change label details on the mammogram machine</li>
+          <li>Amended image details will appear above (refresh image information if they do not)</li>
+        </ul>
+
+        <p>or</p>
+
+        <p><a href="./images-manual" class="nhsuk-link">Record image information manually</a> – you can add notes to indicate what information needs to be corrected</p>
+
+        <h2>Technical issues with the mammogram machine</h2>
+        <p><a href="./attended-not-screened-reason" class="nhsuk-link app-link--warning">Stop this appointment</a></p>
+
+        <p>Other appointments can be cancelled from the clinic list if this fault cannot be resolved.</p>
+      </div>
+    </div>
+  {% endcall %}
+
+</div>
\ No newline at end of file
diff --git a/app/views/events/images-automatic.html b/app/views/events/images-automatic.html
index ecc596cf..02c33ba0 100644
--- a/app/views/events/images-automatic.html
+++ b/app/views/events/images-automatic.html
@@ -201,6 +201,8 @@ <h2>Additional images</h2>
     </div>
   </div>
 
+  {% include "_includes/images/image-troubleshooting.njk" %}
+
 {% endblock %}
 
 
diff --git a/app/views/events/images-before-mammography.html b/app/views/events/images-before-mammography.html
index 5f965860..66ce87d5 100644
--- a/app/views/events/images-before-mammography.html
+++ b/app/views/events/images-before-mammography.html
@@ -40,14 +40,7 @@ <h1>{{ pageHeading }}</h1>
     </a> #}
   </p>
 
-  <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-
-
-  <p>
-    <a class="nhsuk-link app-link--error" href="./images-manual">There is a problem with the images</a>
-  </p>
-
-
+  {% include "_includes/images/image-troubleshooting.njk" %}
 
   {% include "screening-cannot-proceed-link.njk" %}