<% var wsRackId = typeof rack !== 'undefined' && rack ? rack.id : (typeof rackId !== 'undefined' ? rackId : ''); %>
<% var wsTab = typeof workspaceTab !== 'undefined' ? workspaceTab : 'rack'; %>
<% var wsFlowId = typeof flowDiagram !== 'undefined' && flowDiagram ? flowDiagram.id : null; %>
<% var wsLandscapeId = typeof landscapeDiagram !== 'undefined' && landscapeDiagram ? landscapeDiagram.id : null; %>
<nav class="rack-ws-nav">
  <div class="rwn-inner">
    <a href="/racks/<%= wsRackId %>" class="rwn-tab <%= wsTab === 'rack' ? 'active' : '' %>"><i data-lucide="server"></i> Rack Design</a>
    <a href="<%= wsFlowId ? '/racks/' + wsRackId + '/diagram/' + wsFlowId : '/racks/' + wsRackId + '/flow/new' %>" class="rwn-tab <%= wsTab === 'flow' ? 'active' : '' %>"><i data-lucide="git-branch"></i> Applicatie Flow</a>
    <a href="<%= wsLandscapeId ? '/racks/' + wsRackId + '/diagram/' + wsLandscapeId : '/racks/' + wsRackId + '/landscape/new' %>" class="rwn-tab <%= wsTab === 'landscape' ? 'active' : '' %>"><i data-lucide="layers"></i> Landschap</a>
    <a href="/racks/<%= wsRackId %>/studio" class="rwn-tab <%= wsTab === 'studio' ? 'active' : '' %>"><i data-lucide="layout-panel-left"></i> Studio</a>
    <a href="/racks/<%= wsRackId %>/report" class="rwn-tab <%= wsTab === 'report' ? 'active' : '' %>"><i data-lucide="file-text"></i> Rapport</a>
  </div>
</nav>
<style>
.rack-ws-nav{background:linear-gradient(90deg,rgba(10,22,40,.98),rgba(20,45,75,.98));border-bottom:1px solid rgba(0,212,255,.25);position:sticky;top:0;z-index:300;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.rwn-inner{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem;overflow-x:auto;max-width:100%}
.rwn-tab{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:8px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.65);text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:all .15s}
.rwn-tab:hover{color:#fff;background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.2)}
.rwn-tab.active{color:var(--accent,#00d4ff);background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.35);box-shadow:0 0 16px rgba(0,212,255,.12)}
.rwn-tab svg{width:14px;height:14px}
body.has-rack-ws-nav .navbar{position:relative}
body.arch-editor.has-rack-ws-nav .arch-topbar{top:42px}
body.arch-editor.has-rack-ws-nav .rack-ws-nav{top:0}
body.arch-editor.has-rack-ws-nav .rack-context-bar{top:90px}
body.arch-editor.has-rack-ws-nav .editor-layout{padding-top:90px}
body.arch-editor.embed-mode .arch-topbar,
body.arch-editor.embed-mode .rack-context-bar,
body.arch-editor.embed-mode .rack-ws-nav{display:none!important}
body.arch-editor.embed-mode .editor-layout{padding-top:0!important;height:100vh}
</style>
