<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Studio — <%= rack.name %> — Mek-Tech</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/neon.css">
<link rel="stylesheet" href="/css/dynamic.css">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
html,body{height:100%;margin:0;overflow:hidden}
body{background:#0a1628;font-family:Inter,sans-serif;color:#e8f4ff}
.studio-shell{display:flex;flex-direction:column;height:100vh}
.studio-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.45rem .75rem;background:rgba(15,30,55,.95);border-bottom:1px solid rgba(0,212,255,.2);gap:.5rem;flex-wrap:wrap}
.studio-toolbar h1{font-size:.85rem;margin:0;font-weight:700}
.studio-toolbar p{font-size:.65rem;color:#6b9ab8;margin:.1rem 0 0}
.studio-actions{display:flex;gap:.35rem;flex-wrap:wrap}
.studio-split{flex:1;display:flex;min-height:0;position:relative}
.studio-pane{min-width:0;overflow:hidden;background:#0d1f38}
.studio-pane.rack-pane{flex:0 0 var(--rack-w,38%);border-right:1px solid rgba(0,212,255,.15)}
.studio-pane.flow-pane{flex:1}
.studio-pane iframe{width:100%;height:100%;border:none;display:block;background:transparent}
.studio-divider{width:6px;cursor:col-resize;background:rgba(0,212,255,.08);border-left:1px solid rgba(0,212,255,.15);border-right:1px solid rgba(0,212,255,.15);flex-shrink:0;transition:background .15s}
.studio-divider:hover,.studio-divider.dragging{background:rgba(0,212,255,.25)}
.studio-hint{font-size:.62rem;color:#6b9ab8;padding:.35rem .75rem;background:rgba(0,0,0,.2);border-top:1px solid rgba(0,212,255,.1)}
.studio-hint strong{color:var(--accent,#00d4ff)}
</style>
</head>
<body class="has-rack-ws-nav">
<div class="studio-shell">
<%- include('partials/rack-workspace-nav', { rack, flowDiagram, landscapeDiagram, workspaceTab: 'studio' }) %>
<div class="studio-toolbar">
  <div>
    <h1>Gecombineerde Studio — <%= rack.name %></h1>
    <p>Infrastructuur links · Applicatie flows rechts · sleep de scheidingslijn om te vergroten/verkleinen</p>
  </div>
  <div class="studio-actions">
    <button type="button" class="btn btn-secondary btn-small" onclick="loadDemo()">Voorbeeld laden</button>
    <button type="button" class="btn btn-secondary btn-small" onclick="setLayout(50)">50/50</button>
    <button type="button" class="btn btn-secondary btn-small" onclick="setLayout(35)">Meer flow</button>
    <button type="button" class="btn btn-secondary btn-small" onclick="setLayout(60)">Meer rack</button>
    <a href="/racks/<%= rack.id %>/report" class="btn btn-accent btn-small">Rapport</a>
  </div>
</div>
<div class="studio-split" id="studioSplit">
  <div class="studio-pane rack-pane" id="rackPane">
    <iframe id="rackFrame" src="/racks/<%= rack.id %>?embed=1" title="Rack Design"></iframe>
  </div>
  <div class="studio-divider" id="studioDivider" title="Sleep om te vergroten/verkleinen"></div>
  <div class="studio-pane flow-pane" id="flowPane">
    <iframe id="flowFrame" src="<%= flowDiagram ? '/racks/' + rack.id + '/diagram/' + flowDiagram.id : '/racks/' + rack.id + '/flow/new' %>?embed=1" title="Applicatie Flow"></iframe>
  </div>
</div>
<div class="studio-hint">
  <strong>Tip:</strong> Wijzig het rack links (devices slepen) en teken flows rechts. Gebruik de tabs bovenaan om te wisselen — je blijft altijd binnen rack <strong><%= rack.name %></strong>.
  <% if (!flowDiagram) { %> Nog geen flow? Klik <strong>Voorbeeld laden</strong> voor een startpunt. <% } %>
</div>
</div>
<script>
lucide.createIcons();
const divider = document.getElementById('studioDivider');
const split = document.getElementById('studioSplit');
let dragging = false;
function setLayout(pct){ document.documentElement.style.setProperty('--rack-w', pct + '%'); }
setLayout(38);
divider.addEventListener('mousedown', function(e){ dragging=true; divider.classList.add('dragging'); e.preventDefault(); });
window.addEventListener('mousemove', function(e){
  if(!dragging) return;
  const r = split.getBoundingClientRect();
  const pct = Math.min(70, Math.max(22, ((e.clientX - r.left) / r.width) * 100));
  setLayout(pct);
});
window.addEventListener('mouseup', function(){ dragging=false; divider.classList.remove('dragging'); });
async function loadDemo(){
  try {
    const r = await fetch('/racks/<%= rack.id %>/studio/demo', { method: 'POST' });
    const d = await r.json();
    if(d.success){
      document.getElementById('flowFrame').src = '/racks/<%= rack.id %>/diagram/' + d.flowId + '?embed=1';
      setTimeout(function(){ location.reload(); }, 400);
    }
  } catch(e){ alert('Demo laden mislukt'); }
}
window.addEventListener('message', function(e){
  if(e.data && e.data.type === 'mek-navigate-rack') window.location.href = e.data.url;
});
</script>
<script src="/js/theme.js"></script>
</body>
</html>
