{% set classes = ['aae-a-menu', 'e-atomic-element', base_styles.base] | merge(settings.classes | default([])) | join(' ') %}

{% set text_color    = settings.text_color   | default('') %}
{% set hover_color   = settings.hover_color  | default('') %}
{% set active_color  = settings.active_color | default('') %}
{% set dd_bg         = settings.dropdown_bg        | default('') %}
{% set dd_hover_bg   = settings.dropdown_hover_bg  | default('') %}
{% set ham_color     = settings.hamburger_color    | default('') %}
{% set drawer_bg     = settings.drawer_bg          | default('') %}
{% set overlay_color = settings.overlay_color      | default('') %}

{% set style_vars %}
--aae-menu-align: {{ settings.align | default('center') }};
{% if text_color    %}--aae-menu-color: {{ text_color }};{% endif %}
{% if hover_color   %}--aae-menu-hover-color: {{ hover_color }};{% endif %}
{% if active_color  %}--aae-menu-active-color: {{ active_color }};{% endif %}
{% if dd_bg         %}--aae-menu-dropdown-bg: {{ dd_bg }};{% endif %}
{% if dd_hover_bg   %}--aae-menu-dropdown-hover-bg: {{ dd_hover_bg }};{% endif %}
{% if ham_color     %}--aae-menu-hamburger-color: {{ ham_color }};{% endif %}
{% if drawer_bg     %}--aae-menu-drawer-bg: {{ drawer_bg }};{% endif %}
{% if overlay_color %}--aae-menu-drawer-overlay: {{ overlay_color }};{% endif %}
--aae-menu-font-size: {{ settings.font_size          | default(15) }}px;
--aae-menu-font-weight: {{ settings.font_weight        | default('500') }};
--aae-menu-item-padding-x: {{ settings.padding_x          | default(14) }}px;
--aae-menu-item-padding-y: {{ settings.padding_y          | default(10) }}px;
--aae-menu-item-gap: {{ settings.item_gap          | default(4) }}px;
--aae-menu-link-radius: {{ settings.link_radius         | default(6) }}px;
--aae-menu-dropdown-min-width: {{ settings.dropdown_min_width | default(220) }}px;
--aae-menu-dropdown-radius: {{ settings.dropdown_radius      | default(8) }}px;
--aae-menu-drawer-width: {{ settings.drawer_width     | default(320) }}px;
--aae-menu-transition: {{ settings.transition_ms | default(250) }}ms cubic-bezier(.4,0,.2,1);
{% endset %}

<div class="{{ classes }} {{ editor_classes | default('') }}"
    data-id="{{ id }}"
    data-e-type="{{ type }}"
    data-interaction-id="{{ interaction_id }}"
    data-layout="{{ settings.layout | default('horizontal') }}"
    data-hamburger="{{ settings.hamburger ? 'true' : 'false' }}"
    data-breakpoint="{{ settings.breakpoint | default(768) }}"
    data-drawer-effect="{{ settings.drawer_animation | default('slide-left') }}"
    data-dropdown-effect="{{ settings.dropdown_animation | default('slide') }}"
    style="{{ style_vars | replace({'\n':' '}) }}"
    {% if settings._cssid is defined and settings._cssid is not empty %}
        id="{{ settings._cssid | e('html_attr') }}"
    {% endif %}
    {% if settings.attributes is defined and settings.attributes is not empty %}
        {{ settings.attributes | default('') | raw }}
    {% endif %}
    {{ editor_attributes | default('') | raw }}>

    <button class="aae-a-menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="aae-a-menu-nav-{{ id }}">
        <span class="aae-a-menu-toggle-bars" aria-hidden="true">
            <span></span><span></span><span></span>
        </span>
    </button>

    <div class="aae-a-menu-overlay" aria-hidden="true"></div>

    <nav id="aae-a-menu-nav-{{ id }}" class="aae-a-menu-nav" role="navigation" data-menu-slug="{{ settings.menu | default('') }}">
        <div class="aae-a-menu-nav-header">
            <span class="aae-a-menu-nav-title">{{ settings.mobile_label | default('Menu') }}</span>
            <button class="aae-a-menu-close" type="button" aria-label="Close menu">
                <span class="aae-a-menu-close-icon" aria-hidden="true"></span>
            </button>
        </div>
        <div class="aae-a-menu-nav-body">
            {% if settings.rendered_menu is defined and settings.rendered_menu is not empty %}
                {{ settings.rendered_menu | raw }}
            {% else %}
                <div class="aae-a-menu-placeholder">
                    Menu rendered on frontend / preview.
                </div>
            {% endif %}
        </div>
    </nav>
</div>