{% extends "mvp/base.html" %}
{% load i18n flex_menu static dac %}
{% comment %}
  Account Center base: the normal mvp app shell (sidebar, navbar, dock all
  untouched) with a two-column main area — the Account Center sub menu on the
  left, page content on the right. allauth's manage layout and dac's own
  pages both extend this template.

  Blocks head_title / extra_head / extra_body are mapped onto mvp's
  title / head / extra_js blocks so stock allauth templates work unchanged.
{% endcomment %}

{% block title %}
  {% block head_title %}
    {% trans "Account Center" %}
  {% endblock head_title %}
{% endblock title %}

{% block head %}
  {{ block.super }}
  {% block extra_head %}
  {% endblock extra_head %}
{% endblock head %}

{% block styles %}
  <link rel="stylesheet" href="{% static 'css/dac.css' %}" />
{% endblock styles %}

{% block app.main %}
  <c-app.main>
    <div class="container mx-auto px-4 py-4 lg:py-6">
      <div class="flex flex-col lg:flex-row lg:items-start gap-4 lg:gap-6">
        <aside class="w-full lg:w-65 lg:shrink-0"
               aria-label="{% trans "Account navigation" %}">
          {% block account_menu %}
            {% comment %}
              Same menu, two render sites: a collapsed dropdown below lg, the
              persistent card from lg up. One source of truth (the flex menu);
              CSS-only single-markup would require overriding DaisyUI's
              dropdown hidden-state internals per breakpoint — too brittle.
            {% endcomment %}
            {% account_section as section %}
            <c-dropdown full class="w-full lg:hidden" content_class="p-2">
              <c-slot name="button">
                <c-button tabindex="0"
                          role="button"
                          full
                          align="between"
                          reverse
                          icon="chevron_down"
                          text="{% if section %}{{ section.label }}{% else %}{% trans "Account Center" %}{% endif %}" />
              </c-slot>
              {% render_menu "AccountCenterMenu" renderer="sidebar" %}
            </c-dropdown>
            <div class="hidden lg:block card bg-base-200 p-2">
              {% render_menu "AccountCenterMenu" renderer="sidebar" %}
            </div>
          {% endblock account_menu %}
        </aside>
        <div class="grow min-w-0 max-w-3xl">
          {% block account_breadcrumbs %}
            {% account_section as section %}
            {% if section %}
              <c-breadcrumbs class="mb-2">
                <c-breadcrumbs.item text="{% trans "Account Center" %}"
                                    href="{% url 'account-center' %}" />
                {% if section.is_current %}
                  <c-breadcrumbs.item text="{{ section.label }}" />
                {% else %}
                  <c-breadcrumbs.item text="{{ section.label }}"
                                      href="{{ section.url }}" />
                {% endif %}
              </c-breadcrumbs>
            {% endif %}
          {% endblock account_breadcrumbs %}
          {% block content %}
          {% endblock content %}
        </div>
      </div>
    </div>
    <c-messages :messages="messages" dismissible />
  </c-app.main>
{% endblock app.main %}

{% block extra_js %}
  {% block extra_body %}
  {% endblock extra_body %}
{% endblock extra_js %}