{% load i18n static legal_tags %}

<button class="sticky toggle-nav-sidebar" id="toggle-nav-sidebar" aria-label="{% translate 'Toggle navigation' %}">
  <span class="toggle-icon">‹</span>
</button>

<div id="nav-backdrop" class="nav-backdrop" aria-hidden="true"></div>

<nav class="sticky" id="nav-sidebar" aria-label="{% translate 'Sidebar' %}">
  <button type="button" class="drawer-close" data-nav-close aria-label="{% translate 'Close navigation' %}">
    <span aria-hidden="true">✕</span>
  </button>

  <!-- Hub Shortcut to Workdesk -->
  <div class="sidebar-top-hub">
    <a href="/workdesk/" class="sidebar-workdesk-link" title="Buka Single-Screen Workdesk">
      <div class="hub-pill">
        <span class="hub-pulse"></span>
        <span class="hub-text">Workdesk Notaris</span>
      </div>
      <span class="hub-action">Buka ↗</span>
    </a>
  </div>

  <!-- Search / Filter Navigation -->
  <div class="nav-search-box">
    <svg class="search-svg" width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
    </svg>
    <input type="search" id="nav-filter"
           placeholder="Cari modul / dokumen…"
           aria-label="{% translate 'Filter navigation items' %}">
  </div>

  <!-- Categorized Legal Navigation -->
  <div class="nav-modules-list">
    {% if available_apps %}
      <!-- 1. Operasional Pekerjaan & Akta (Jobs) -->
      {% for app in available_apps %}
        {% if app.app_label == 'jobs' %}
          <div class="app-group app-group-legal">
            <div class="app-group-header">
              <span class="group-icon">⚖️</span>
              <span class="group-title">Operasional Akta</span>
            </div>
            <table class="nav-table">
              <tbody>
                {% for model in app.models %}
                  <tr class="model-row{% if model.admin_url in request.path|urlencode %} is-active{% endif %}">
                    <th scope="row">
                      <a href="{{ model.admin_url }}" {% if model.admin_url in request.path|urlencode %}aria-current="page"{% endif %}>
                        <span class="model-bullet"></span>
                        <span class="model-name">{{ model.name|bahasa }}</span>
                      </a>
                    </th>
                    {% if model.add_url %}
                      <td class="add-cell">
                        <a href="{{ model.add_url }}" class="add-quick-btn" title="Tambah {{ model.name }}">+</a>
                      </td>
                    {% else %}
                      <td></td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      {% endfor %}

      <!-- 2. Keuangan & Billing (Billing) -->
      {% for app in available_apps %}
        {% if app.app_label == 'billing' %}
          <div class="app-group app-group-finance">
            <div class="app-group-header">
              <span class="group-icon">💳</span>
              <span class="group-title">Keuangan & Billing</span>
            </div>
            <table class="nav-table">
              <tbody>
                {% for model in app.models %}
                  <tr class="model-row{% if model.admin_url in request.path|urlencode %} is-active{% endif %}">
                    <th scope="row">
                      <a href="{{ model.admin_url }}" {% if model.admin_url in request.path|urlencode %}aria-current="page"{% endif %}>
                        <span class="model-bullet"></span>
                        <span class="model-name">{{ model.name|bahasa }}</span>
                      </a>
                    </th>
                    {% if model.add_url %}
                      <td class="add-cell">
                        <a href="{{ model.add_url }}" class="add-quick-btn" title="Tambah {{ model.name }}">+</a>
                      </td>
                    {% else %}
                      <td></td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      {% endfor %}

      <!-- 3. Integrasi Eksternal (AHU / BPN) -->
      {% for app in available_apps %}
        {% if app.app_label == 'ahu_integration' %}
          <div class="app-group app-group-external">
            <div class="app-group-header">
              <span class="group-icon">🏛️</span>
              <span class="group-title">Ditjen AHU & BPN</span>
            </div>
            <table class="nav-table">
              <tbody>
                {% for model in app.models %}
                  <tr class="model-row{% if model.admin_url in request.path|urlencode %} is-active{% endif %}">
                    <th scope="row">
                      <a href="{{ model.admin_url }}" {% if model.admin_url in request.path|urlencode %}aria-current="page"{% endif %}>
                        <span class="model-bullet"></span>
                        <span class="model-name">{{ model.name|bahasa }}</span>
                      </a>
                    </th>
                    {% if model.add_url %}
                      <td class="add-cell">
                        <a href="{{ model.add_url }}" class="add-quick-btn" title="Tambah {{ model.name }}">+</a>
                      </td>
                    {% else %}
                      <td></td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      {% endfor %}

      <!-- 4. Akses & Kepatuhan MPWN (Accounts) -->
      {% for app in available_apps %}
        {% if app.app_label == 'accounts' %}
          <div class="app-group app-group-compliance">
            <div class="app-group-header">
              <span class="group-icon">🛡️</span>
              <span class="group-title">Kepatuhan & MPWN</span>
            </div>
            <table class="nav-table">
              <tbody>
                {% for model in app.models %}
                  <tr class="model-row{% if model.admin_url in request.path|urlencode %} is-active{% endif %}">
                    <th scope="row">
                      <a href="{{ model.admin_url }}" {% if model.admin_url in request.path|urlencode %}aria-current="page"{% endif %}>
                        <span class="model-bullet"></span>
                        <span class="model-name">{{ model.name|bahasa }}</span>
                      </a>
                    </th>
                    {% if model.add_url %}
                      <td class="add-cell">
                        <a href="{{ model.add_url }}" class="add-quick-btn" title="Tambah {{ model.name }}">+</a>
                      </td>
                    {% else %}
                      <td></td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      {% endfor %}

      <!-- 5. Konfigurasi Sistem Lainnya (Auth, Celery, dll) -->
      {% for app in available_apps %}
        {% if app.app_label != 'jobs' and app.app_label != 'billing' and app.app_label != 'ahu_integration' and app.app_label != 'accounts' %}
          <div class="app-group app-group-system">
            <div class="app-group-header">
              <span class="group-icon">⚙️</span>
              <span class="group-title">{{ app.name|bahasa }}</span>
            </div>
            <table class="nav-table">
              <tbody>
                {% for model in app.models %}
                  <tr class="model-row{% if model.admin_url in request.path|urlencode %} is-active{% endif %}">
                    <th scope="row">
                      <a href="{{ model.admin_url }}" {% if model.admin_url in request.path|urlencode %}aria-current="page"{% endif %}>
                        <span class="model-bullet"></span>
                        <span class="model-name">{{ model.name|bahasa }}</span>
                      </a>
                    </th>
                    {% if model.add_url %}
                      <td class="add-cell">
                        <a href="{{ model.add_url }}" class="add-quick-btn" title="Tambah {{ model.name }}">+</a>
                      </td>
                    {% else %}
                      <td></td>
                    {% endif %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      {% endfor %}
    {% else %}
      <p style="padding:16px;font-size:12px;color:var(--slate-400);">{% translate "You don't have permission to view or edit anything." %}</p>
    {% endif %}
  </div>

  <!-- Bottom Workspace Footer -->
  <div class="sidebar-footer">
    <div class="footer-legal-badge">
      <span>UUJN No. 2/2014 Ps. 16</span>
    </div>
  </div>
</nav>