<h1>Third-Party Integrations</h1>

<% if (forbidden) { %>
  <div class="alert alert-danger">Your role does not have permission to manage integrations.</div>
<% } else { %>

<div class="card">
  <table>
    <thead><tr><th>Name</th><th>Category</th><th>Status</th><th>Notes</th></tr></thead>
    <tbody>
      <% for (const i of integrations) { %>
      <tr>
        <td><%= i.name %></td>
        <td><%= i.category %></td>
        <td>
          <form method="post" action="/ops/integrations/<%= i.id %>" style="display:inline">
            <select name="status" onchange="this.form.submit()">
              <% for (const s of ['planned','in_progress','connected','disabled']) { %>
              <option value="<%= s %>" <%= i.status === s ? 'selected' : '' %>><%= s %></option>
              <% } %>
            </select>
          </form>
        </td>
        <td><%= i.notes || '' %></td>
      </tr>
      <% } %>
      <% if (!integrations.length) { %><tr><td colspan="4" style="color:var(--muted)">No integrations registered — this is a catalog for future work (court e-filing, accounting software, etc.), not live connections.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">Register Integration</h2>
  <form method="post" action="/ops/integrations">
    <label>Name</label>
    <input type="text" name="name" required>
    <label>Category</label>
    <input type="text" name="category" required placeholder="e.g. court_e_filing, accounting_software">
    <label>Notes</label>
    <textarea name="notes" rows="3"></textarea>
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Register</button>
  </form>
</div>

<% } %>
