From 028cb84fed0453afcd986099c80890ddbf9c06d4 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Fri, 25 Jul 2025 08:43:03 -0500
Subject: [PATCH] Refactor image fragment to improve code readability and
 maintainability

---
 .../templates/fragments/_image_fragment.html  | 84 ++++++++++---------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/inventory/templates/fragments/_image_fragment.html b/inventory/templates/fragments/_image_fragment.html
index 6ff57cb..2fd72f6 100644
--- a/inventory/templates/fragments/_image_fragment.html
+++ b/inventory/templates/fragments/_image_fragment.html
@@ -4,49 +4,51 @@
 <!-- Image fragment -->
 <div class="image-slot text-center">
     {% if image %}
-        <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
-            style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
-            <div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
-                <div class="modal-dialog modal-dialog-centered modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-body text-center">
-                            <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-fluid">
-                        </div>
-                        {% if enabled %}
-                        <div class="modal-footer justify-content-between">
-                            <button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
-                                {{ icons.render_icon('trash') }}
-                            </button>
-
-                            <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
-                                <input type="file" id="image-upload-input-{{ id }}" name="file"
-                                       onchange="ImageWidget.submitImageUpload('{{ id }}')">
-                                <input type="hidden" name="target_model" value="inventory">
-                                <input type="hidden" name="model_id" value="{{ id }}">
-                                <input type="hidden" name="caption" value="Uploaded via UI">
-                            </form>
-
-                            <label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
-                                {{ icons.render_icon('upload') }}
-                            </label>
-                        </div>
-                        {% endif %}
-                    </div>
+    <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
+        style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
+    <div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-body text-center">
+                    <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}"
+                        class="img-fluid">
                 </div>
+                {% if enabled %}
+                <div class="modal-footer justify-content-between">
+                    <button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
+                        {{ icons.render_icon('trash') }}
+                    </button>
+
+                    <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
+                        <input type="file" id="image-upload-input-{{ id }}" name="file"
+                            onchange="ImageWidget.submitImageUpload('{{ id }}')">
+                        <input type="hidden" name="target_model" value="inventory">
+                        <input type="hidden" name="model_id" value="{{ id }}">
+                        <input type="hidden" name="caption" value="Uploaded via UI">
+                    </form>
+
+                    <label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
+                        {{ icons.render_icon('upload') }}
+                    </label>
+                </div>
+                {% endif %}
             </div>
+        </div>
+    </div>
     {% else %}
-        {% if enabled %}
-            <a href="#" class="link-secondary" onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
-                {{ icons.render_icon('image', 256) }}
-            </a>
-            <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
-                <input type="file" id="image-upload-input-{{ id }}" name="file"
-                       onchange="ImageWidget.submitImageUpload('{{ id }}')">
-                <input type="hidden" name="target_model" value="inventory">
-                <input type="hidden" name="model_id" value="{{ id }}">
-                <input type="hidden" name="caption" value="Uploaded via UI">
-            </form>
-        {% endif %}
+    {% if enabled %}
+    <a href="#" class="link-secondary"
+        onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
+        {{ icons.render_icon('image', 256) }}
+    </a>
+    <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
+        <input type="file" id="image-upload-input-{{ id }}" name="file"
+            onchange="ImageWidget.submitImageUpload('{{ id }}')">
+        <input type="hidden" name="target_model" value="inventory">
+        <input type="hidden" name="model_id" value="{{ id }}">
+        <input type="hidden" name="caption" value="Uploaded via UI">
+    </form>
+    {% endif %}
     {% endif %}
 </div>
-{% endmacro %}
+{% endmacro %}
\ No newline at end of file