{#
  macros/navigation.html - Navigation component macros for APEP.
  Import with: {% from "apep/macros/navigation.html" import header_banner, nav, footer_nav, lang_switch %}

  Macros:
    header_banner(company_name, subtitle, url)
    nav(items, variant, flying, top_offset)
    footer_nav(links, variant)
    lang_switch(current_lang, langs)

  CSS dependency: nav.css, footer-nav.css, lang-switch.css (loaded via ApepLoader)
  Author: sora7672
#}

{% from "apep/macros/helper.html" import alert %}


{#
  Renders a site header banner with a company name and optional subtitle.
  When url is provided the entire banner becomes a clickable anchor.

  @param company_name {string} - company or site name displayed as the main text
  @param subtitle     {string} - small muted text below the name. Optional.
  @param url          {string} - when set, wraps the banner in an <a> tag. Optional.
#}
{% macro header_banner(company_name, subtitle=None, url=None) %}
{% if not company_name %}
    {{ alert("header_banner: company_name is required", "Pass a non-empty string as the first argument.") }}
{% else %}
{% if url %}
<a href="{{ url }}" class="header-banner header-banner-linked">
{% else %}
<div class="header-banner">
{% endif %}
    <span class="header-banner-name">{{ company_name }}</span>
    {% if subtitle %}
    <span class="header-banner-subtitle">{{ subtitle }}</span>
    {% endif %}
{% if url %}
</a>
{% else %}
</div>
{% endif %}
<script>ApepLoader.register("nav.css");</script>
{% endif %}
{% endmacro %}


{#
  Renders a responsive navigation bar with hamburger menu for mobile.
  Supports one level of dropdown children per item.

  Class structure on the rendered <nav>:
    .nav              - base styles
    .nav-top          - horizontal top bar
    .nav-left         - vertical left sidebar
    .nav-right        - vertical right sidebar
    .nav-flying       - fixed positioning modifier (added when flying=true)

  When flying is true, sibling .top-header elements are automatically
  pushed aside via CSS sibling selectors (~, +) to avoid overlap.

  @param items      {dict}   - dict of label to value pairs.
                               Value is either a string (direct url) or a dict
                               of {label: url} for dropdown entries. Mixed supported:
                               {"Label": "/url", "Dropdown": {"Child": "/url"}}
  @param variant    {string} - "top" | "left" | "right", default "top"
  @param flying     {bool}   - when true, nav is fixed to viewport edge. Default false.
  @param top_offset {string} - CSS value for top offset when flying, e.g. "60px".
                               Default "0px".
#}
{% macro nav(items, variant="top", flying=False, top_offset="0px") %}
{% if not items %}
    {{ alert("nav: items is required", "Pass a non-empty dict of {label: url} or {label: {child_label: url}} pairs.") }}
{% elif variant not in ["top", "left", "right"] %}
    {{ alert("nav: invalid variant \"" ~ variant ~ "\"", "Allowed values: \"top\", \"left\", \"right\".") }}
{% else %}
{# For left/right: calculate height based on item count.
   44px per top-level item, 32px inner padding top+bottom.
   Dropdowns are display:none by default so their height is excluded. #}
{% if variant in ["left", "right"] %}
{% set ns = namespace(total=32) %}
{% for label, value in items.items() %}
{% set ns.total = ns.total + 44 %}
{% endfor %}
{% endif %}
<nav class="nav nav-{{ variant }}{% if flying %} nav-flying{% endif %}"
     id="apep-nav"
     style="{% if flying and top_offset != '0px' %}top: {{ top_offset }};{% endif %}{% if variant in ['left', 'right'] %}min-height: {{ ns.total }}px;{% endif %}"
>
    <div class="nav-inner">

        <button class="nav-hamburger" id="apep-nav-toggle" aria-label="Menu toggle" aria-expanded="false">
            <span></span><span></span><span></span>
        </button>

        <ul class="nav-links" id="apep-nav-links">
            {% for label, value in items.items() %}
            <li class="nav-item {% if value is mapping %}nav-item-dropdown{% endif %}">
                <a href="{{ value if value is not mapping else '#' }}"
                   class="nav-link"
                   {% if value is mapping %}aria-haspopup="true"{% endif %}>
                    {{ label }}
                    {% if value is mapping %}
                    <span class="nav-chevron">&#8964;</span>
                    {% endif %}
                </a>
                {% if value is mapping %}
                <ul class="nav-dropdown">
                    {% for child_label, child_url in value.items() %}
                    <li><a href="{{ child_url }}" class="nav-dropdown-link">{{ child_label }}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        </ul>

    </div>
</nav>
<script>ApepLoader.register("nav.css");</script>
<script>ApepLoader.register("nav.js", "defer");</script>
{% endif %}
{% endmacro %}


{#
  Renders a footer navigation in either a multi-column block layout or a flat inline row.
  The blocks variant auto-detects whether the links dict contains grouped sections
  (nested dicts) or a flat {name: href} structure and renders accordingly.

  @param links   {dict}   - for "blocks": either {title: {name: href, ...}, ...} for grouped
                            columns or {name: href, ...} for a single ungrouped block.
                            for "inline": {name: href, ...} flat dict of link labels to hrefs.
  @param variant {string} - "blocks" | "inline", default "blocks"
                            blocks - multi-column layout with optional section titles
                            inline - single row of links separated by spacing
#}
{% macro footer_nav(links, variant="blocks") %}
{% if not links %}
    {{ alert("footer_nav: links is required", "Pass a dict of {name: href} or {title: {name: href}} pairs.") }}
{% elif variant not in ["blocks", "inline"] %}
    {{ alert("footer_nav: invalid variant \"" ~ variant ~ "\"", "Allowed values: \"blocks\", \"inline\".") }}
{% elif variant == "inline" %}
<nav class="footer-nav footer-nav-inline">
    {% for name, href in links.items() %}
    <a href="{{ href }}" class="footer-nav-link">{{ name }}</a>
    {% endfor %}
</nav>
<script>ApepLoader.register("footer-nav.css");</script>
{% else %}
<nav class="footer-nav footer-nav-blocks">
    {% if links.values()|first is mapping %}
        {% for key, value in links.items() %}
        <div class="footer-nav-block">
            <span class="footer-nav-title">{{ key }}</span>
            <div class="footer-nav-block-links">
                {% for name, href in value.items() %}
                <a href="{{ href }}" class="footer-nav-link">{{ name }}</a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    {% else %}
    <div class="footer-nav-block">
        <div class="footer-nav-block-links">
            {% for name, href in links.items() %}
            <a href="{{ href }}" class="footer-nav-link">{{ name }}</a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</nav>
<script>ApepLoader.register("footer-nav.css");</script>
{% endif %}
{% endmacro %}


{#
  Renders a language switcher as a row of buttons, one per language.
  The active language button receives the lang-switch-btn-active class.
  Language switching logic is handled by lang-switch.js.

  @param current_lang {string} - language code of the currently active language, default "de"
  @param langs        {list}   - list of {code, label, flag} dicts.
                                 flag is an emoji or similar string, optional per entry.
                                 Defaults to DE and EN with emoji flags when omitted.
#}
{% macro lang_switch(current_lang="de", langs=None) %}
{% set default_langs = [
    {"code": "de", "label": "DE", "flag": "🇩🇪"},
    {"code": "en", "label": "EN", "flag": "🇬🇧"}
] %}
{% set lang_list = langs if langs else default_langs %}
<div class="lang-switch">
    {% for lang in lang_list %}
    <button
        class="lang-switch-btn {% if lang.code == current_lang %}lang-switch-btn-active{% endif %}"
        data-lang="{{ lang.code }}"
        aria-label="Switch language to {{ lang.label }}"
    >
        <span class="lang-switch-flag">{{ lang.flag if lang.flag is defined else "" }}</span>
        <span class="lang-switch-label">{{ lang.label }}</span>
    </button>
    {% endfor %}
</div>
<script>ApepLoader.register("lang-switch.css");</script>
<script>ApepLoader.register("lang-switch.js", "defer");</script>
{% endmacro %}