{# Shared sidebar partial — include dengan {% include '_sidebar.html' %} #}
{# Setiap nav-item punya data-menu-key. JS di setiap page akan hide item yang
   tidak ada di me.allowed_menus (returned dari /api/v1/me). #}
{# CSS di-load via sidebar.css (extracted dari inline duplication di 9 template).
   <link> tag valid di body per HTML5 spec. #}
<link rel="stylesheet" href="/static/css/sidebar.css">
<aside class="sidebar">
  <div class="sb-logo">
    <div class="logo-box">
      <img src="/static/img/logo-sarana-gemilang.png" alt="PT Sarana Gemilang"
           style="width:36px;height:36px;object-fit:contain;flex-shrink:0"
           onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
      <div class="logo-icon" style="display:none">SG</div>
      <div class="logo-text">
        <strong>PT. Sarana Gemilang</strong>
        <span>Document Control System</span>
      </div>
    </div>
  </div>
  <div class="sb-section">
    <div class="sb-label">Menu Utama</div>
    <a class="nav-item {% if active=='dashboard' %}active{% endif %}" href="/" data-menu-key="dashboard">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-4 0v2"/></svg>
      Data Shipment
      {# Badge total shipment — page yang butuh set show_shipment_badge=true sebelum include. #}
      {% if show_shipment_badge %}<span class="nav-badge" id="sb-total">—</span>{% endif %}
    </a>
    <a class="nav-item {% if active=='eksekutif' %}active{% endif %}" href="/eksekutif" data-menu-key="eksekutif">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/></svg>
      Dashboard Eksekutif
    </a>
    <a class="nav-item {% if active=='kinerja' %}active{% endif %}" href="/kinerja" data-menu-key="kinerja">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
      Dashboard Kinerja
    </a>
    <a class="nav-item {% if active=='laporan' %}active{% endif %}" href="/laporan" data-menu-key="laporan">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
      Laporan
    </a>
    <a class="nav-item {% if active=='drafting_assistant' %}active{% endif %}" href="/drafting-assistant" data-menu-key="drafting_assistant" style="display:none">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
      Drafting Assistant
    </a>
  </div>
  <div class="sb-section">
    <div class="sb-label">Master Data</div>
    <a class="nav-item {% if active=='consignee' %}active{% endif %}" href="/master/consignee" data-menu-key="consignee">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      Consignee / Importir
    </a>
    <a class="nav-item {% if active=='vendor' %}active{% endif %}" href="/master/vendor" data-menu-key="vendor">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
      Vendor Trucking
    </a>
    <a class="nav-item {% if active=='users' %}active{% endif %}" href="/users" id="nav-users" data-menu-key="users" style="display:none">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      Manajemen User
    </a>
    <a class="nav-item {% if active=='audit' %}active{% endif %}" href="/audit" id="nav-audit" data-menu-key="audit" style="display:none">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
      Audit Trail
    </a>
  </div>

  <script>
    // Sidebar dynamic filter based on role.allowed_menus.
    // Load /api/v1/me once, then hide nav-item yang tidak ada di allowed list.
    (function() {
      fetch('/api/v1/me').then(r => r.json()).then(me => {
        const allowed = new Set(me.allowed_menus || []);
        document.querySelectorAll('.nav-item[data-menu-key]').forEach(el => {
          const key = el.dataset.menuKey;
          // users & audit sudah default display:none. Kalau ada di allowed, show.
          if (allowed.has(key)) {
            el.style.display = 'flex';
          } else {
            el.style.display = 'none';
          }
        });
        // Fill footer info dari /me — pakai sb-avatar/sb-name/sb-role kalau ada
        const sbA = document.getElementById('sb-avatar');
        const sbN = document.getElementById('sb-name');
        const sbR = document.getElementById('sb-role');
        if (sbA) sbA.textContent = (me.nama || me.username || '?')[0].toUpperCase();
        if (sbN) sbN.textContent = me.nama || me.username;
        if (sbR) sbR.textContent = me.role;
      }).catch(() => {});
    })();
  </script>
  <div class="sb-footer">
    <div class="user-pill">
      <div class="avatar" id="sb-avatar">—</div>
      <div class="user-info">
        <strong id="sb-name">—</strong>
        <span id="sb-role">—</span>
      </div>
    </div>
    <a href="/logout" class="sb-logout"
       style="display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:8px 10px;background:rgba(220,38,38,.12);color:#fecaca;border:1px solid rgba(220,38,38,.25);border-radius:8px;font-size:11.5px;font-weight:600;text-decoration:none;transition:all .15s;font-family:inherit"
       onmouseover="this.style.background='rgba(220,38,38,.22)';this.style.color='white'"
       onmouseout="this.style.background='rgba(220,38,38,.12)';this.style.color='#fecaca'">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
        <polyline points="16 17 21 12 16 7"/>
        <line x1="21" y1="12" x2="9" y2="12"/>
      </svg>
      Logout
    </a>
  </div>
</aside>