{% load i18n mvp %}
<c-vars id :breakpoint="mvp_config.layout.sidebar.breakpoint" class />
{% sidebar_has_breakpoint breakpoint as persistent %}
{% comment %}
  Open-state persistence is desktop-only: the persistent sidebar remembers
  open/collapsed across reloads (desktopOpen), while the overlay drawer
  (below the breakpoint, or breakpoint="never") is transient and always
  starts closed. $watch only writes back at/above the breakpoint, so
  toggling the mobile overlay never clobbers the saved desktop state.
{% endcomment %}
<div id="{{ id }}"
     class="drawer {% sidebar_breakpoint_class breakpoint %} {{ class }}"
     {% if persistent %}
     x-data="{ mq: window.matchMedia('(min-width: {% breakpoint_px breakpoint %}px)'), open: false, desktopOpen: $persist(true).as('{{ id }}-drawer-open') }"
     x-init="open = mq.matches && desktopOpen; $watch('open', v => { if (mq.matches) desktopOpen = v })"
     {% else %}
     x-data="{ open: false }"
     {% endif %}
     {{ attrs }}>
  <input id="{{ id }}-toggle"
         type="checkbox"
         x-model="open"
         class="drawer-toggle" />
  {% if persistent %}
  {% comment %}
    Alpine's persist scripts are deferred, so x-init only corrects the
    checkbox after the browser's first paint — by then the sidebar's width
    transition has already been active for a frame, and the correction
    plays as a visible animation (#178). This blocking script runs
    immediately, mid-parse, before that first paint, and sets the same
    checked state x-init would derive, so there is nothing left to correct
    once Alpine hydrates.
  {% endcomment %}
  <script>
    (function () {
      try {
        var stored = localStorage.getItem('{{ id }}-drawer-open');
        var wasOpen = stored === null ? true : JSON.parse(stored);
        var isDesktop = window.matchMedia('(min-width: {% breakpoint_px breakpoint %}px)').matches;
        if (isDesktop && wasOpen) {
          document.getElementById('{{ id }}-toggle').checked = true;
        }
      } catch (e) {}
    })();
  </script>
  {% endif %}
  <div class="drawer-side is-drawer-close:overflow-visible z-40">
    <label for="{{ id }}-toggle"
           aria-label="{% trans "Close sidebar" %}"
           class="drawer-overlay"></label>
    {{ sidebar }}
  </div>
  {% comment %}
    Laid out as a flex column only on a page carrying <c-page fill>; see the
    .mvp-page-fill rule in mvp/tailwind/base.css. Every other page renders
    byte-identically to before (issue #247).
  {% endcomment %}
  <div class="drawer-content">{{ slot }}</div>
</div>