mcias/web/templates/fragments/policy_form.html

{{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>
  <button type="button" id="tab-json" class="btn btn-sm"
          onclick="showTab('json')" style="font-size:.8rem;opacity:.6">JSON</button>
</div>
<form hx-post="/policies" hx-target="#policies-tbody" hx-swap="afterbegin">
  <div id="pf-form-mode">
    <div style="display:grid;grid-template-columns:1fr 80px 120px;gap:.5rem;margin-bottom:.5rem">
      <input class="form-control" type="text" name="description"
             placeholder="Description" required>
      <input class="form-control" type="number" name="priority"
             placeholder="100" value="100" min="0" max="9999">
      <select class="form-control" name="effect" required>
        <option value="allow">allow</option>
        <option value="deny">deny</option>
      </select>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <div>
        <label class="text-small text-muted">Roles (select multiple)</label>
        <select class="form-control" name="roles" multiple size="6" style="font-size:.85rem">
          <option value="admin">admin</option>
          <option value="user">user</option>
          <option value="guest">guest</option>
          <option value="viewer">viewer</option>
          <option value="editor">editor</option>
          <option value="commenter">commenter</option>
        </select>
      </div>
      <div>
        <label class="text-small text-muted">Account types</label>
        <select class="form-control" name="account_types" multiple size="4" style="font-size:.85rem">
          <option value="human">human</option>
          <option value="system">system</option>
        </select>
      </div>
    </div>
    <div style="margin-bottom:.5rem">
      <label class="text-small text-muted">Actions (select multiple)</label>
      <select class="form-control" name="actions" multiple size="5" style="font-family:monospace;font-size:.8rem">
        {{range .AllActions}}
        <option value="{{.}}">{{.}}</option>
        {{end}}
      </select>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <div>
        <label class="text-small text-muted">Resource type</label>
        <select class="form-control" name="resource_type" style="font-size:.85rem">
          <option value="">(any)</option>
          <option value="account">account</option>
          <option value="token">token</option>
          <option value="pgcreds">pgcreds</option>
          <option value="audit_log">audit_log</option>
          <option value="totp">totp</option>
          <option value="policy">policy</option>
        </select>
      </div>
      <div>
        <label class="text-small text-muted">Subject UUID (optional)</label>
        <input class="form-control" type="text" name="subject_uuid"
               placeholder="Only match this account UUID" style="font-size:.85rem">
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <div>
        <label class="text-small text-muted">Service names (comma-separated)</label>
        <input class="form-control" type="text" name="service_names"
               placeholder="e.g. payments-api,billing" style="font-size:.85rem">
      </div>
      <div>
        <label class="text-small text-muted">Required tags (comma-separated)</label>
        <input class="form-control" type="text" name="required_tags"
               placeholder="e.g. env:production,svc:billing" style="font-size:.85rem">
      </div>
    </div>
    <div style="margin-bottom:.5rem">
      <label style="font-size:.85rem;display:flex;align-items:center;gap:.4rem;cursor:pointer">
        <input type="checkbox" name="owner_matches_subject" value="1">
        Owner must match subject (self-service rules only)
      </label>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <div>
        <label class="text-small text-muted">Not before (UTC, optional)</label>
        <input class="form-control" type="datetime-local" name="not_before" style="font-size:.85rem">
      </div>
      <div>
        <label class="text-small text-muted">Expires at (UTC, optional)</label>
        <input class="form-control" type="datetime-local" name="expires_at" style="font-size:.85rem">
      </div>
    </div>
  </div>

  <div id="pf-json-mode" style="display:none">
    <div style="display:grid;grid-template-columns:1fr 80px;gap:.5rem;margin-bottom:.5rem">
      <input class="form-control" type="text" name="description"
             placeholder="Description" id="pf-json-desc">
      <input class="form-control" type="number" name="priority"
             placeholder="100" value="100" min="0" max="9999" id="pf-json-priority">
    </div>
    <div style="margin-bottom:.5rem">
      <label class="text-small text-muted">Rule JSON (<code>effect</code> required; other fields optional)</label>
      <textarea class="form-control" name="rule_json" rows="12"
                style="font-family:monospace;font-size:.8rem;white-space:pre"
                placeholder='{"effect":"allow","roles":["admin"],"actions":["accounts:list"]}'></textarea>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <div>
        <label class="text-small text-muted">Not before (UTC, optional)</label>
        <input class="form-control" type="datetime-local" name="not_before" id="pf-json-nb" style="font-size:.85rem">
      </div>
      <div>
        <label class="text-small text-muted">Expires at (UTC, optional)</label>
        <input class="form-control" type="datetime-local" name="expires_at" id="pf-json-ea" style="font-size:.85rem">
      </div>
    </div>
  </div>

  <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}}