<!DOCTYPE html>
<html lang="nl">
<head><%- include('partials/head', { pageTitle: 'Pro Designer' }) %></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:1rem 1.5rem 2rem;max-width:100%">
    <%- include('partials/crm-bar') %>
    <div class="page-hdr fade-in-up" style="margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem">
      <div>
        <h1 style="font-size:1.35rem;font-weight:800;margin:0">Pro Architecture Designer</h1>
        <p style="font-size:.75rem;color:var(--text-muted);margin:.15rem 0 0">Drag-and-drop data architecture met CRM-koppeling</p>
      </div>
      <div style="display:flex;gap:.5rem;align-items:center">
        <select id="clientPick" onchange="syncClient()" style="padding:.35rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.75rem">
          <option value="">Cliënt koppelen...</option>
          <% clients.forEach(function(c) { %><option value="<%= c.id %>"<%= clientId == c.id ? ' selected' : '' %>><%= c.name %></option><% }); %>
        </select>
        <a href="/architecture" class="btn btn-small" style="padding:.35rem .7rem;font-size:.72rem;border-radius:7px;border:1px solid var(--border);color:var(--text-muted);text-decoration:none">← Diagrammen</a>
      </div>
    </div>
    <iframe id="designerFrame" class="designer-frame" src="<%= designerUrl %>" allow="clipboard-read; clipboard-write"></iframe>
  </main>
</div>
<script>
function syncClient() {
  const id = document.getElementById('clientPick').value;
  if (id) window.location = '/architecture/designer?client_id=' + id;
}
</script>
<%- include('partials/scripts') %>
</body>
</html>
