{% load i18n insight_tags %}
{# Sidebar Navigation Partial - renders navigation categories and items for use inside a sidebar layout tag. #}

{# Optional title #}
{% if sidebar_data.title %}
  <div class="flex justify-between items-center pb-4 mb-4 border-b border-insight-surface">
    <h2 class="flex gap-2 items-center text-lg">
      {% if sidebar_data.icon %}
        <div>
          {% icon sidebar_data.icon %}
        </div>
      {% endif %}
      {{ sidebar_data.title }}
    </h2>
  </div>
{% endif %}

<nav class="space-y-2">
  {# Top-level links (before categories) #}
  {% if sidebar_data.links %}
    <ul>
      {% for item in sidebar_data.links %}
        {% if item.request_url %}
          <li data-insight-side-nav>
            <a
              {% if item.htmx %}
                hx-get="{{ item.htmx.request_url|default:item.request_url }}"
                hx-target="{{ item.htmx.target }}"
                hx-swap="{{ item.htmx.swap|default:'innerHTML' }} show:window:top"
                hx-push-url="true"
                hx-on::after-request="document.body.dispatchEvent(new Event('PageChanged'))"
              {% endif %}
              href="{{ item.request_url }}"
              class="insight-sidebar-link flex gap-2 items-center px-4 py-1 text-sm text-insight-headline tracking-wide"
            >
              {% if item.icon %}
                {% icon item.icon %}
              {% endif %}
              <span class="flex-1">{{ item.text }}</span>
              {% if item.badge %}
                {% badge config=item.badge %}
              {% endif %}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  {% endif %}

  {# Optional categories section title #}
  {% if sidebar_data.categories_title %}
    <h3 class="flex gap-1 pt-8 mt-4 font-semibold text-lg tracking-wide border-t border-insight-surface">
      {{ sidebar_data.categories_title }}
    </h3>
  {% endif %}

  {# Navigation categories #}
  <ul>
    {% for category in sidebar_data.categories %}
      <li>
        <h4 class="flex gap-1 pt-4 pb-2 font-semibold text-base text-insight-primary-hover tracking-wide">
          {% if category.icon %}
            {% icon category.icon %}
          {% endif %}
          {{ category.caption }}
        </h4>
        <ul>
          {% for item in category.items %}
            {% if item.request_url %}
              <li data-insight-side-nav>
                <a
                  {% if item.htmx %}
                    hx-get="{{ item.htmx.request_url|default:item.request_url }}"
                    hx-target="{{ item.htmx.target }}"
                    hx-swap="{{ item.htmx.swap|default:'innerHTML' }} show:window:top"
                    hx-push-url="true"
                    hx-on::after-request="document.body.dispatchEvent(new Event('PageChanged'))"
                  {% endif %}
                  href="{{ item.request_url }}"
                  class="insight-sidebar-link flex gap-2 items-center px-4 py-1 text-sm text-insight-headline tracking-wide"
                >
                  {% if item.icon %}
                    {% icon item.icon %}
                  {% endif %}
                  <span class="flex-1">{{ item.text }}</span>
                  {% if item.badge %}
                    {% badge config=item.badge %}
                  {% endif %}
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </li>
    {% endfor %}
  </ul>
</nav>