<%

var portal = locals.portal || 'client';
var nav = locals.nav || [];
var navCounts = locals.navCounts || {};
var switchable = locals.switchable || [];
var ICON = locals.ICON || {};
var MODULES = locals.MODULES || {};
var currentUser = locals.currentUser || null;
var workspace = locals.workspace || null;
%>
<aside class="sidebar" id="mainSidebar">

  <button type="button" class="sb-toggle" data-sidebar-toggle
          aria-label="Collapse the menu" aria-expanded="true" title="Collapse the menu">
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M6.4 4.2L2.9 8l3.5 3.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12.4 3.2v9.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </button>
  <div class="sb-top">

    <a class="brandwrap" href="<%= portal === 'staff' ? '/staff' : '/dashboard' %>" style="display:flex;align-items:center;gap:11px">
        <img class="brand-logo-img" src="/img/voctos-logo.png" alt="VOCTOS" onerror="this.remove();document.getElementById('brandFallback').style.display='flex'">
        <span id="brandFallback" class="brand" style="display:none">
          <svg class="mark" viewBox="0 0 44 44" fill="none"><defs><linearGradient id="vm" x1="6" y1="38" x2="38" y2="6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0D172D"/><stop offset=".55" stop-color="#007D89"/><stop offset="1" stop-color="#78C03C"/></linearGradient></defs><path d="M33 12.5 A14 14 0 1 0 36.5 25" stroke="url(#vm)" stroke-width="5.6" stroke-linecap="round"/><path d="M27.5 7 L36.8 10.6 L32.8 19 Z" fill="#78C03C"/></svg>
          <span class="wm">VOCTOS<span class="tm">®</span></span>
        </span>
    </a>
    <% if (portal === 'staff') { %>
      <div class="switcher"><span class="cl-badge">V</span><div><div class="cl-name">VOCTOS</div><div class="cl-sub">Agency workspace</div></div></div>
    <% } else if (workspace) { %>
      <%

        var canSwitch = (switchable || []).length > 1;

        var badgeHtml = workspace.logoUrl
          ? '<span class="cl-badge cl-logo"><img src="' + workspace.logoUrl + '" alt="" width="27" height="27" loading="lazy"></span>'
          : '<span class="cl-badge">' + (workspace.badge || (workspace.name || '?').slice(0, 2).toUpperCase()) + '</span>';
      %>
      <% if (canSwitch) { %>
        <%

          var viewingAsStaff = !!locals.viewingAsStaff;
          var switchBase = viewingAsStaff ? '/staff/view/' : '/switch-project/';
        %>
        <details class="switch-wrap">
          <summary class="switcher">
            <%- badgeHtml %>
            <div><div class="cl-name"><%= workspace.name %></div><div class="cl-sub"><%= workspace.plan %> plan</div></div>
            <svg class="chev" width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </summary>
          <div class="switch-menu">
            <div class="switch-head"><%= viewingAsStaff ? 'Switch client' : 'Switch project' %></div>
            <%

              var _toQ = (typeof currentPath !== 'undefined' && currentPath && currentPath !== '/dashboard') ? '?to=' + encodeURIComponent(currentPath) : '';
              var _stateOf = function (w) {
                var l = w.lifecycle || {}, st = l.status || 'active';
                if (st === 'readonly' && l.readOnlyUntil && new Date(l.readOnlyUntil) <= new Date()) st = 'archived';
                if (st !== 'active') return { archived: 'Archived', paused: 'Paused', readonly: 'Read-only' }[st] || 'Inactive';
                return w.previewMode ? 'Preview' : '';
              };
              var _on = [], _off = [];
              switchable.forEach(function (w) { (_stateOf(w) ? _off : _on).push(w); });
              var _here = function (w) { return String(w._id) === String(workspace._id); };
              var _row = function (w) {
                var tag = _stateOf(w);
                return '<a class="switch-item ' + (_here(w) ? 'on' : '') + '" href="' + switchBase + encodeURIComponent(w.slug) + _toQ + '">'
                  + (w.logoUrl
                    ? '<span class="cl-badge cl-logo"><img src="' + h.esc(w.logoUrl) + '" alt="" width="28" height="22" loading="lazy"></span>'
                    : '<span class="cl-badge">' + h.esc(w.badge || (w.name || '?').slice(0, 2).toUpperCase()) + '</span>')
                  + '<span class="switch-nm">' + h.esc(w.name) + '</span>'
                  + (tag ? '<span class="switch-tag">' + tag + '</span>' : '')
                  + (_here(w) ? '<span class="switch-tick">\u2713</span>' : '')
                  + '</a>';
              };
            %>

            <% _on.forEach(function (w) { %><%- _row(w) %><% }) %>
            <% if (_off.length) { %>
              <details class="switch-more"<% if (_off.some(_here)) { %> open<% } %>>
                <summary class="switch-item switch-more-btn">
                  <span><%= viewingAsStaff ? 'Non-active clients' : 'Non-active projects' %></span>
                  <span class="switch-count"><%= _off.length %></span>
                  <svg class="chev" width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </summary>
                <% _off.forEach(function (w) { %><%- _row(w) %><% }) %>
              </details>
            <% } %>
            <% if (viewingAsStaff) { %><a class="switch-item switch-back" href="/staff">Back to agency panel</a><% } %>
          </div>
        </details>
      <% } else { %>
        <div class="switcher"><%- badgeHtml %><div><div class="cl-name"><%= workspace.name %></div><div class="cl-sub"><%= workspace.plan %> plan</div></div></div>
      <% } %>
    <% } %>
  </div>

  <nav class="nav">

    <% var _lockedG = nav.filter(function (g) { return g.locked && g.items.every(function (it) { return it.locked; }); });
       var _openG = nav.filter(function (g) { return _lockedG.indexOf(g) < 0; });
       var _hereLocked = _lockedG.some(function (g) { return g.items.some(function (it) { return it.id === activePage; }); }); %>
    <% _openG.forEach(function (group) { %>
      <div class="nav-group">
        <div class="gl"><%= group.g %></div>
        <% group.items.forEach(function (it) { var count = (it.countKey && navCounts && !it.locked) ? navCounts[it.countKey] : 0; %>
          <% if (it.locked) { var mod = (locals.MODULES || {})[it.svc] || { name: it.n }; %>

            <div class="nav-lock">
              <a class="nav-item locked" href="<%= it.href %>" data-nav="<%= it.id %>">
                <svg class="ic" viewBox="0 0 16 16" fill="none"><%- ICON[it.i] %></svg>
                <span><%= it.n %></span>
                <svg class="lockic" width="13" height="13" viewBox="0 0 16 16" fill="none" aria-label="Not in your plan">
                  <rect x="3.2" y="7" width="9.6" height="6.6" rx="1.6" stroke="currentColor" stroke-width="1.4"/>
                  <path d="M5.6 7V5.2a2.4 2.4 0 014.8 0V7" stroke="currentColor" stroke-width="1.4"/>
                </svg>
              </a>
              <div class="lock-pop" role="tooltip">
                <div class="lp-h">
                  <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3.2" y="7" width="9.6" height="6.6" rx="1.6" stroke="currentColor" stroke-width="1.6"/><path d="M5.6 7V5.2a2.4 2.4 0 014.8 0V7" stroke="currentColor" stroke-width="1.6"/></svg>
                  <%= mod.name %> (not in your plan)
                </div>
                <div class="lp-b"><%= mod.line || '' %></div>

                <a class="btn btn-sm btn-primary" style="width:100%;margin-top:10px" href="/tickets?request=<%= it.svc %>">Request this service</a>
              </div>
            </div>
          <% } else { %>
            <a class="nav-item <%= it.id === activePage ? 'active' : '' %>" href="<%= it.href %>" data-nav="<%= it.id %>"<%= it.soon ? ' onclick="return false"' : '' %>>
              <svg class="ic" viewBox="0 0 16 16" fill="none"><%- ICON[it.i] %></svg>
              <span><%= it.n %></span>
              <% if (it.soon) { %><span class="cnt">soon</span><% } else if (count) { %><span class="cnt <%= it.hot ? 'hot' : '' %>"><%= count %></span><% } %>
            </a>
          <% } %>
        <% }) %>
      </div>
      <% if (_lockedG.length && (group === _openG.filter(function (g) { return g.svc; }).slice(-1)[0] || (!_openG.some(function (g) { return g.svc; }) && group === _openG[0]))) { %>
        <details class="nav-more"<%= _hereLocked ? ' open' : '' %>>
          <summary class="nav-item nav-more-btn">
            <svg class="ic" viewBox="0 0 16 16" fill="none"><rect x="3.2" y="7" width="9.6" height="6.6" rx="1.6" stroke="currentColor" stroke-width="1.4"/><path d="M5.6 7V5.2a2.4 2.4 0 014.8 0V7" stroke="currentColor" stroke-width="1.4"/></svg>
            <span>More modules</span>
            <span class="nav-more-n"><%= _lockedG.length %></span>
            <svg class="chev" width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </summary>
          <% _lockedG.forEach(function (g) { var mod = (locals.MODULES || {})[g.svc] || { name: g.g }; var first = g.items[0]; %>
            <div class="nav-lock">
              <a class="nav-item locked" href="<%= first.href %>" data-nav="<%= first.id %>">
                <svg class="ic" viewBox="0 0 16 16" fill="none"><%- ICON[first.i] %></svg>
                <span><%= g.g === 'Overview' ? 'Dashboard & Overview' : g.g %></span>
                <span class="nav-more-n"><%= g.items.length %></span>
              </a>
              <div class="lock-pop" role="tooltip">
                <div class="lp-h"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3.2" y="7" width="9.6" height="6.6" rx="1.6" stroke="currentColor" stroke-width="1.6"/><path d="M5.6 7V5.2a2.4 2.4 0 014.8 0V7" stroke="currentColor" stroke-width="1.6"/></svg> <%= mod.name %> (not in your plan)</div>
                <div class="lp-b"><%= mod.line || '' %></div>
                <div class="lp-b" style="margin-top:6px"><%= g.items.map(function (it) { return it.n; }).join(' · ') %></div>
                <a class="btn btn-sm btn-primary" style="width:100%;margin-top:10px" href="/tickets?request=<%= g.svc %>">Request this service</a>
              </div>
            </div>
          <% }) %>
        </details>
      <% } %>
    <% }) %>
  </nav>
  <style>
    .nav-more{margin:10px 0 0}
    .nav-more > summary{list-style:none; cursor:pointer; opacity:.78}
    .nav-more > summary::-webkit-details-marker{display:none}
    .nav-more > summary:hover{opacity:1}
    .nav-more .chev{margin-left:8px; transition:transform .15s}
    .nav-more > summary .nav-more-n{margin-left:auto}
    .nav-more[open] .chev{transform:rotate(180deg)}
    .nav-more .nav-more-n{margin-left:auto; font-size:11px; opacity:.6}
    .nav-more .nav-lock{padding-left:6px}
    html[data-sidebar="collapsed"] .nav-more > summary span, html[data-sidebar="collapsed"] .nav-more .chev{display:none}
  </style>

  <div class="sb-foot">
    <% if (locals.tour && (tour.steps || []).length) { %>

      <a class="staff-link" href="#" data-tour-start>
        <svg class="ic" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.4" stroke="currentColor" stroke-width="1.4"/><path d="M6.3 6.1a1.8 1.8 0 113.2 1.1c-.5.5-1.1.8-1.3 1.4M8 11.4v.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        Take the tour
      </a>
    <% } %>
    <% if (portal === 'staff') { %>
      <a class="staff-link" href="/dashboard"><svg class="ic" viewBox="0 0 16 16" fill="none"><%- ICON.aiv %></svg> View as client</a>
    <% } else { %>
      <a class="am-card" href="/messages">
        <% var _am = (workspace && workspace.accountManager) || null; %>
        <span class="av" style="position:relative;<%= (_am && _am.avatarUrl) ? 'padding:0;background:var(--surface-2)' : '' %>"><% if (_am && _am.avatarUrl) { %><img class="ava-img" src="<%= _am.avatarUrl %>" alt="<%= _am.name %>"><% } else { %><%= _am ? _am.initials : 'SK' %><% } %><span class="presence on" style="position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface)"></span></span>
        <div><div class="am-nm"><%= (workspace && workspace.accountManager) ? workspace.accountManager.name : 'Account Manager' %></div><div class="am-role">Account Manager, online</div></div>
        <svg class="msg" width="16" height="16" viewBox="0 0 16 16" fill="none"><%- ICON.messages %></svg>
      </a>
      <% if (locals.showStaff) { %>
        <a class="staff-link staff" href="/staff"><svg class="ic" viewBox="0 0 16 16" fill="none"><%- ICON.mission %></svg> VOCTOS staff panel</a>
      <% } %>
    <% } %>
  </div>
</aside>
