{% load static i18n insight_tags %}

{# Open button for drawers (static=False) or mobile toggle (static + mobile_behavior="drawer") #}
{% if not static or mobile_behavior == "drawer" %}
  <button
    class="fixed top-20 {% if side == 'right' %}ltr:right-4 rtl:left-4{% else %}ltr:left-4 rtl:right-4{% endif %} z-40 p-2 text-white bg-insight-primary-action rounded-insight-full shadow-insight-subtle hover:bg-insight-primary-action-hover active:bg-insight-primary-action-active{% if static %} lg:hidden{% endif %}"
    {% if static %}data-sidebar-toggle="{{ side }}"{% else %}data-sidebar-target="{{ side }}"{% endif %}
    aria-label="{% trans 'Open sidebar' %}"
    aria-expanded="false"
    aria-controls="{{ side }}-sidebar{% if static %}-mobile{% endif %}"
  >
    {% if side == "left" %}
      {% if static %}
        {% icon name="bars-3" size="s" %}
      {% else %}
        <span class="ltr:inline rtl:hidden">{% icon name="chevron-right" size="s" %}</span>
        <span class="ltr:hidden rtl:inline">{% icon name="chevron-left" size="s" %}</span>
      {% endif %}
    {% else %}
      <span class="ltr:inline rtl:hidden">{% icon name="chevron-left" size="s" %}</span>
      <span class="ltr:hidden rtl:inline">{% icon name="chevron-right" size="s" %}</span>
    {% endif %}
  </button>
{% endif %}

{# Sidebar wrapper #}
<div
  id="{{ side }}-sidebar"
  data-insight-sidebar="{{ side }}"
  data-static="{{ static|yesno:'true,false' }}"
  data-mobile-behavior="{{ mobile_behavior }}"
  class="{% if not static %}hidden fixed inset-0 z-50{% endif %} {{ wrapper_class }}"
>
  {# Backdrop (only for drawers or mobile drawer mode) #}
  {% if not static %}
    <div class="fixed inset-0 bg-black/50 transition-opacity" data-insight-dismiss="sidebar"></div>
  {% endif %}

  {# Actual sidebar #}
  <aside
    role="complementary"
    aria-label="{% trans 'Side navigation' %}"
    class="{{ width_class }} {% if static %} {% if mobile_behavior == 'hidden' %}hidden lg:block {% elif mobile_behavior == 'drawer' %}hidden lg:block {% endif %} sticky {% if navbar_fixed %}top-16 h-[calc(100dvh-4rem)]{% else %}top-0 h-dvh{% endif %} {% else %} fixed h-dvh {% endif %} {% if side == 'right' %}ltr:right-0 ltr:border-l rtl:left-0 rtl:border-r{% else %}ltr:left-0 ltr:border-r rtl:right-0 rtl:border-l{% endif %} [scrollbar-gutter:stable] bg-insight-surface border-insight-surface shadow-insight-surface transition overflow-y-auto"
  >
    <div class="flex flex-col {% if side == 'right' %}ps-4 pe-4 md:pe-6{% else %}ps-4 pe-4 md:ps-6{% endif %} {% if static %}py-8{% else %}pb-8{% endif %}">
      {# Close button (only for drawers) #}
      {% if not static %}
        <div class="flex justify-end pt-4">
          {% button label=_("Close sidebar") icon_name="x-mark" icon_size="xs" icon_only=True subtle=True type="secondary" data_insight_dismiss="sidebar" %}
        </div>
      {% endif %}
      {# User-provided content #}
      {{ content }}
    </div>
  </aside>
</div>

{# Mobile drawer (hidden overlay for static sidebars with drawer mobile behavior) #}
{% if static and mobile_behavior == "drawer" %}
  <div
    id="{{ side }}-sidebar-mobile"
    data-insight-sidebar="{{ side }}"
    data-static="false"
    data-mobile-drawer="true"
    class="hidden fixed inset-0 z-50 lg:hidden"
  >
    <div class="fixed inset-0 bg-black/50 transition-opacity" data-insight-dismiss="sidebar"></div>
    <aside
      role="complementary"
      aria-label="{% trans 'Side navigation' %}"
      class="{{ width_class }} fixed h-dvh {% if side == 'right' %}ltr:right-0 ltr:border-l rtl:left-0 rtl:border-r{% else %}ltr:left-0 ltr:border-r rtl:right-0 rtl:border-l{% endif %} [scrollbar-gutter:stable] bg-insight-base border-insight-surface shadow-insight-surface transition overflow-y-auto"
    >
      <div class="flex flex-col {% if side == 'right' %}ps-4 pe-4 md:pe-6{% else %}ps-4 pe-4 md:ps-6{% endif %} pb-8">
        <div class="flex justify-end pt-4">
          {% button label=_("Close sidebar") icon_name="x-mark" icon_only=True subtle=True type="secondary" data_insight_dismiss="sidebar" %}
        </div>
        {{ content }}
      </div>
    </aside>
  </div>
{% endif %}