04/07 updated password reset, ticket templates, and satisfaction survey

app/templates/tickets/create.html

@@ -5,6 +5,31 @@
 {% block content %}
 <div class="row justify-content-center">
   <div class="col-lg-8">
+    {% if templates %}
+    <div class="card mb-3">
+      <div class="card-header"><i class="bi bi-layout-text-window-reverse me-2"></i>Start from a Template</div>
+      <div class="card-body">
+        <p style="font-size:13px;color:var(--muted);margin-bottom:14px;">
+          Select a common request type to pre-fill the form, or fill it in manually below.
+        </p>
+        <div class="row g-2">
+          {% for t in templates %}
+          <div class="col-6 col-md-4">
+            <button type="button" class="btn btn-secondary w-100 text-start template-btn"
+                    style="padding:10px 14px;font-size:13px;"
+                    data-title="{{ t.title_hint }}"
+                    data-category="{{ t.category }}"
+                    data-priority="{{ t.priority }}"
+                    data-description="{{ t.description | e }}">
+              <i class="bi {{ t.icon }} me-2" style="color:var(--accent);"></i>{{ t.name }}
+            </button>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    {% endif %}
+
     <div class="card">
       <div class="card-header">
         <i class="bi bi-plus-circle me-2"></i>New Support Request
@@ -108,4 +133,35 @@
     </div>
   </div>
 </div>
+{% block scripts %}
+<script>
+document.querySelectorAll('.template-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const title = btn.dataset.title;
+    const cat   = btn.dataset.category;
+    const prio  = btn.dataset.priority;
+    const desc  = btn.dataset.description;
+
+    if (title) document.querySelector('input[name=title]').value = title;
+    if (desc)  document.querySelector('textarea[name=description]').value = desc;
+
+    const catSel = document.querySelector('select[name=category]');
+    if (catSel) {
+      for (const opt of catSel.options) {
+        if (opt.value === cat) { opt.selected = true; break; }
+      }
+    }
+    const prioSel = document.querySelector('select[name=priority]');
+    if (prioSel) {
+      for (const opt of prioSel.options) {
+        if (opt.value === prio) { opt.selected = true; break; }
+      }
+    }
+    // Scroll to form
+    document.querySelector('input[name=title]').scrollIntoView({behavior:'smooth', block:'center'});
+    document.querySelector('input[name=title]').focus();
+  });
+});
+</script>
 {% endblock %}
+{% endblock %}