Remove all inline JS from admin templates

script-src 'self' blocks inline onclick handlers and <script> blocks.
Migrate all interactive behavior to data-* attributes wired by mcias.js:

- data-toggle-form: accounts, policies, pgcreds create-form buttons
- data-href: audit clickable table rows
- data-tab: policy form tab switching (moved showTab from inline script)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/templates/accounts.html

@@ -7,11 +7,13 @@
     <p class="text-muted text-small">Manage user and service accounts</p>
   </div>
   <button class="btn btn-primary"
-          onclick="var f=document.getElementById('create-form');f.style.display=f.style.display==='none'?'block':'none'">
+          data-toggle-form="create-form"
+          data-label-show="+ New Account"
+          data-label-hide="Cancel">
     + New Account
   </button>
 </div>
-<div id="create-form" class="card mt-2" style="display:none">
+<div id="create-form" class="card mt-2" hidden>
   <h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Create Account</h2>
   <form hx-post="/accounts" hx-target="#accounts-tbody" hx-swap="afterbegin">
     <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
@@ -36,7 +38,9 @@
     <div class="form-actions">
       <button class="btn btn-primary" type="submit">Create</button>
       <button class="btn btn-secondary" type="button"
-              onclick="document.getElementById('create-form').style.display='none'">Cancel</button>
+              data-toggle-form="create-form"
+              data-label-show="Cancel"
+              data-label-hide="Cancel">Cancel</button>
     </div>
   </form>
 </div>

web/templates/fragments/audit_rows.html

@@ -1,6 +1,6 @@
 {{define "audit_rows"}}
 {{range .Events}}
-<tr class="clickable-row" onclick="window.location='/audit/{{.ID}}'">
+<tr class="clickable-row" data-href="/audit/{{.ID}}">
   <td class="text-small text-muted"><a href="/audit/{{.ID}}">{{formatTime .EventTime}}</a></td>
   <td><code style="font-size:.8rem">{{.EventType}}</code></td>
   <td class="text-small text-muted">{{if .ActorUsername}}{{.ActorUsername}}{{else}}&mdash;{{end}}</td>

web/templates/fragments/policy_form.html

@@ -1,9 +1,9 @@
 {{define "policy_form"}}
 <div style="margin-bottom:.75rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem;display:flex;gap:.5rem">
   <button type="button" id="tab-form" class="btn btn-sm btn-secondary"
-          onclick="showTab('form')" style="font-size:.8rem">Form</button>
+          data-tab="form">Form</button>
   <button type="button" id="tab-json" class="btn btn-sm"
-          onclick="showTab('json')" style="font-size:.8rem;opacity:.6">JSON</button>
+          data-tab="json">JSON</button>
 </div>
 <form hx-post="/policies" hx-target="#policies-tbody" hx-swap="afterbegin">
   <div id="pf-form-mode">
@@ -121,20 +121,4 @@
 
   <button class="btn btn-sm btn-secondary" type="submit">Create Rule</button>
 </form>
-<script>
-(function() {
-  var active = 'form';
-  window.showTab = function(tab) {
-    active = tab;
-    document.getElementById('pf-form-mode').style.display = tab === 'form' ? '' : 'none';
-    document.getElementById('pf-json-mode').style.display = tab === 'json' ? '' : 'none';
-    document.getElementById('tab-form').style.opacity = tab === 'form' ? '1' : '.6';
-    document.getElementById('tab-json').style.opacity = tab === 'json' ? '1' : '.6';
-    var formBtn = document.getElementById('tab-form');
-    var jsonBtn = document.getElementById('tab-json');
-    formBtn.className = tab === 'form' ? 'btn btn-sm btn-secondary' : 'btn btn-sm';
-    jsonBtn.className = tab === 'json' ? 'btn btn-sm btn-secondary' : 'btn btn-sm';
-  };
-})();
-</script>
 {{end}}

web/templates/pgcreds.html

@@ -82,7 +82,9 @@
   <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem">
     <h2 style="font-size:1rem;font-weight:600;margin:0">New Credentials</h2>
     <button class="btn btn-sm btn-secondary"
-            onclick="var f=document.getElementById('pgcreds-create-form');f.hidden=!f.hidden;this.textContent=f.hidden?'Add Credentials':'Cancel'">Add Credentials</button>
+            data-toggle-form="pgcreds-create-form"
+            data-label-show="Add Credentials"
+            data-label-hide="Cancel">Add Credentials</button>
   </div>
   <div id="pgcreds-create-form" hidden>
     <p class="text-muted text-small" style="margin-bottom:1rem;margin-top:.5rem">

web/templates/policies.html

@@ -6,12 +6,15 @@
     <h1>Policy Rules</h1>
     <p class="text-muted text-small">{{len .Rules}} operator rules (built-in defaults not shown)</p>
   </div>
-  <button class="btn btn-primary" onclick="document.getElementById('create-form').style.display='block';this.style.display='none'">
+  <button class="btn btn-primary"
+          data-toggle-form="create-form"
+          data-label-show="Add Rule"
+          data-label-hide="Cancel">
     Add Rule
   </button>
 </div>
 
-<div id="create-form" class="card mt-2" style="display:none">
+<div id="create-form" class="card mt-2" hidden>
   <h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Create Policy Rule</h2>
   {{template "policy_form" .}}
 </div>