Update web/templates/entry_view.html

web/templates/entry_view.html

@@ -92,7 +92,7 @@
     <div class="section">
       <div class="section-label">Application</div>
       <div class="section-body lead-text" id="application-text">
-        {{ entry.application|linebreaksbr|default:"—" }}
+            {{ entry.application|linebreaksbr|default:"—" }}
       </div>
     </div>
 
@@ -229,6 +229,12 @@
     border-radius: 3px;
     padding: 0 .15em;
   }
+
+  /* Subtle invalid style for individual Scripture pills */
+  .chip-link.scripture-pill-invalid {
+    background-color: hsl(0 80% 94% / 0.75);
+    border-color: #efc1c1;
+  }
 </style>
 
 <script>
@@ -634,4 +640,44 @@ function showToast(message, duration = 3000) {
 })();
 </script>
 
+<!-- Include shared Scripture Validator and validate each Scripture pill individually -->
+<script src="{% static 'js/scripture-validator.v1.js' %}"></script>
+<script>
+(function () {
+  function validatePills() {
+    const container = document.getElementById('scripture-text');
+    if (!container) return;
+    const pills = container.querySelectorAll('a.chip, a.chip-link');
+
+    pills.forEach(pill => {
+      const txt = (pill.textContent || '').trim();
+      if (!txt) return;
+
+      // Create a temporary off-DOM input to reuse the shared validator
+      const tmp = document.createElement('input');
+      tmp.type = 'text';
+      tmp.value = txt;
+      // We attach, which triggers immediate validation (no need to keep the node)
+      ScriptureValidator.attach(tmp);
+
+      const isValid = tmp.classList.contains('scripture-valid');
+      if (!isValid) {
+        pill.classList.add('scripture-pill-invalid');
+        pill.title = (pill.title ? pill.title + ' • ' : '') + 'Unrecognized scripture format';
+      }
+      // Clean up
+      tmp.remove();
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', validatePills, { once: true });
+  } else {
+    validatePills();
+  }
+  // Also re-run if page is restored from bfcache
+  window.addEventListener('pageshow', validatePills);
+})();
+</script>
+
 {% endblock %}