<!DOCTYPE html>
<html lang="nl">
<head><%- include('partials/head', { pageTitle: 'AI Providers' }) %></head>
<body style="margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text)">
<%- include('partials/navbar') %>
<div class="app-layout" style="display:flex;min-height:100vh;padding-top:var(--hdr-h)">
  <%- include('partials/sidebar') %>
  <main class="main-area" style="flex:1;margin-left:var(--sb-w);padding:1.5rem 2rem 3rem;max-width:1200px">
    <div class="page-hdr fade-in-up" style="margin-bottom:1.5rem">
      <h1 style="font-size:1.5rem;font-weight:800;letter-spacing:-.4px;margin:0">AI Providers</h1>
      <p style="font-size:.78rem;color:var(--text-muted);margin-top:.25rem">Configureer OpenRouter, OpenAI, Anthropic, DeepSeek, Groq, Ollama en custom providers</p>
    </div>

    <% if (saved) { %><div class="alert alert-success" style="background:var(--green-bg);border:1px solid var(--green);color:var(--green);padding:.5rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.78rem">Opgeslagen — config gesynchroniseerd naar alle Python services</div><% } %>
    <% if (tested) { %><div class="alert alert-success" style="background:var(--green-bg);border:1px solid var(--green);color:var(--green);padding:.5rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.78rem">Test OK: <%= tested %></div><% } %>
    <% if (error) { %><div class="alert alert-error" style="background:var(--red-bg);border:1px solid var(--red);color:var(--red);padding:.5rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.78rem"><%= error %></div><% } %>

    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem">
      <% providers.forEach(function(p) { %>
        <div class="provider-card<%= p.is_default ? ' default' : '' %> fade-in-up">
          <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:.75rem">
            <div>
              <div style="font-weight:700;font-size:.95rem"><%= p.name %></div>
              <div style="font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:.15rem"><%= p.provider_type %></div>
            </div>
            <span class="status-dot<%= p.is_active ? '' : ' offline' %>"></span>
          </div>
          <div style="font-size:.72rem;color:var(--text-muted);margin-bottom:.35rem">Model: <code style="color:var(--accent)"><%= p.default_model || '—' %></code></div>
          <div style="font-size:.68rem;color:var(--text-dim);margin-bottom:1rem;word-break:break-all"><%= p.base_url %></div>
          <div style="display:flex;gap:.35rem;flex-wrap:wrap">
            <% if (p.is_default) { %><span style="font-size:.62rem;padding:.15rem .45rem;border-radius:4px;background:rgba(0,212,255,.12);color:var(--accent);border:1px solid rgba(0,212,255,.25)">Default</span><% } %>
            <form action="/ai/test/<%= p.id %>" method="POST" style="display:inline"><button type="submit" class="btn btn-small" style="padding:.25rem .55rem;font-size:.65rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer">Test</button></form>
            <form action="/ai/delete/<%= p.id %>" method="POST" style="display:inline" onsubmit="return confirm('Provider verwijderen?')"><button type="submit" class="btn btn-small" style="padding:.25rem .55rem;font-size:.65rem;border-radius:6px;border:1px solid var(--red);background:transparent;color:var(--red);cursor:pointer">Verwijder</button></form>
          </div>
        </div>
      <% }); %>
    </div>

    <div class="card neon-card fade-in-up" style="background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;position:relative;overflow:hidden">
      <div class="neon-border-top" style="position:absolute;top:0;left:0;right:0;height:3px"></div>
      <h3 style="font-size:.85rem;font-weight:700;margin-bottom:1rem">Nieuwe provider toevoegen</h3>
      <form action="/ai/save" method="POST">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
          <div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Naam</label><input name="name" required placeholder="Mijn OpenRouter" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
          <div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Provider type</label>
            <select name="provider_type" id="providerType" onchange="updatePreset()" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem">
              <% Object.keys(presets).forEach(function(k) { %><option value="<%= k %>"><%= presets[k].label %></option><% }); %>
            </select>
          </div>
          <div style="grid-column:1/-1"><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">API Key</label><input name="api_key" type="password" placeholder="sk-..." style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
          <div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Base URL</label><input name="base_url" id="baseUrl" placeholder="https://openrouter.ai/api/v1" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
          <div><label style="font-size:.68rem;color:var(--text-muted);display:block;margin-bottom:.25rem">Default model</label><input name="default_model" id="defaultModel" placeholder="qwen/qwen3-coder:free" style="width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem"></div>
        </div>
        <div style="display:flex;gap:1rem;margin-top:1rem;align-items:center">
          <label style="font-size:.72rem;display:flex;align-items:center;gap:.35rem;color:var(--text-muted)"><input type="checkbox" name="is_active" value="1" checked> Actief</label>
          <label style="font-size:.72rem;display:flex;align-items:center;gap:.35rem;color:var(--text-muted)"><input type="checkbox" name="is_default" value="1"> Standaard provider</label>
          <button type="submit" class="btn btn-primary" style="margin-left:auto;padding:.45rem 1.2rem;border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer">Opslaan</button>
        </div>
      </form>
    </div>
  </main>
</div>
<script>
const presets = <%- JSON.stringify(presets) %>;
function updatePreset() {
  const t = document.getElementById('providerType').value;
  const p = presets[t];
  if (p) {
    document.getElementById('baseUrl').value = p.base_url || '';
    document.getElementById('defaultModel').value = (p.models && p.models[0]) || '';
  }
}
updatePreset();
</script>
<%- include('partials/scripts') %>
</body>
</html>
