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

  Macros:
    header_banner(company_name, subtitle, url, type, align)
    nav(items, variant, flying, top_offset)
    footer_nav(links, variant)
    lang_switch(current_lang, langs)
    breadcrumb(items, separator)
    pagination(current, total, url_pattern, delta)

  CSS dependency: nav.css, footer-nav.css, lang-switch.css, breadcrumb.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.

  Two visual types are available:

    "stacked" (default) - Surface background, company name + optional subtitle stacked
                          vertically, primary-colored rule line below.
                          Supports align: "left" | "center" (default) | "right"

    "side"              - Surface background, primary-colored accent bar beside
                          the name + subtitle. Bar switches side with alignment.
                          Supports align: "left" (default) | "right"

  @param company_name {string} - company or site name displayed as the main text
  @param subtitle     {string} - small muted text below/beside the name. Optional.
  @param url          {string} - when set, wraps the banner in an <a> tag. Optional.
  @param type         {string} - visual type: "stacked" (default) or "side"
  @param align        {string} - alignment of content within the banner.
                                 "stacked": "left" | "center" (default) | "right"
                                 "side":    "left" (default) | "right"
#}
{% macro header_banner(company_name, subtitle=None, url=None, type="stacked", align=None) %}
{% if not company_name %}
    {{ alert("header_banner: company_name is required", "Pass a non-empty string as the first argument.") }}
{% elif type not in ["stacked", "side"] %}
    {{ alert("header_banner: invalid type \"" ~ type ~ "\"", "Allowed values: \"stacked\" (default), \"side\".") }}
{% elif type == "side" and align is not none and align not in ["left", "right"] %}
    {{ alert("header_banner: invalid align \"" ~ align ~ "\" for type side", "Allowed values for side: \"left\" (default), \"right\".") }}
{% elif type == "stacked" and align is not none and align not in ["left", "center", "right"] %}
    {{ alert("header_banner: invalid align \"" ~ align ~ "\" for type stacked", "Allowed values for stacked: \"left\", \"center\" (default), \"right\".") }}
{% else %}

{# Resolve effective alignment defaults per type #}
{% if type == "side" %}
    {% set _align = align if align else "left" %}
{% else %}
    {% set _align = align if align else "center" %}
{% endif %}

{# Shared outer tag - either <a> or <div> #}
{% if url %}<a href="{{ url }}" data-apep-banner
{% else %}<div data-apep-banner
{% endif %}
    bgcolor="surface"
    style="display: flex; width: 100%;
        {%- if type == "stacked" -%}
            flex-direction: column;
            align-items: {% if _align == "right" %}flex-end{% elif _align == "center" %}center{% else %}flex-start{% endif %};
            padding: 0.75rem 1.5rem;
            gap: 2px;
            text-align: {{ _align }};
        {%- else -%}
            flex-direction: row;
            align-items: center;
            justify-content: {% if _align == "right" %}flex-end{% else %}flex-start{% endif %};
            padding: 0.75rem 1.5rem;
            gap: 1rem;
        {%- endif -%}
        {% if url %}text-decoration: none;{% endif %}"
>

    {# side: accent bar left or right of text block #}
    {% if type == "side" %}
        {% if _align == "right" %}
        <div style="display: flex; flex-direction: column; gap: 2px; text-align: right;">
            <span txtcolor="text-inverted" style="font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;">{{ company_name }}</span>
            {% if subtitle %}
            <span txtcolor="primary" style="font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;">{{ subtitle }}</span>
            {% endif %}
        </div>
        <div bgcolor="primary" style="width: 4px; height: 2.5rem; border-radius: 2px; flex-shrink: 0;"></div>
        {% else %}
        <div bgcolor="primary" style="width: 4px; height: 2.5rem; border-radius: 2px; flex-shrink: 0;"></div>
        <div style="display: flex; flex-direction: column; gap: 2px;">
            <span txtcolor="text-inverted" style="font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;">{{ company_name }}</span>
            {% if subtitle %}
            <span txtcolor="primary" style="font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;">{{ subtitle }}</span>
            {% endif %}
        </div>
        {% endif %}

    {# stacked: name + optional subtitle + rule, container sized to text width #}
    {% else %}
        <div style="display: inline-flex; flex-direction: column; align-items: center;">
            <span txtcolor="text-inverted" style="font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap;">{{ company_name }}</span>
            {% if subtitle %}
            <span txtcolor="primary" style="font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;">{{ subtitle }}</span>
            {% endif %}
            <div bgcolor="primary" style="width: 45%; height: 2px; margin-top: 4px; border-radius: 2px;"></div>
        </div>
    {% 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>
{% else %}
<nav class="footer-nav footer-nav-blocks">
    {% for key, value in links.items() %}
    <div class="footer-nav-block">
        {% if value is mapping %}
        <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>
        {% else %}
        <span class="footer-nav-title"></span>
        <div class="footer-nav-block-links">
            <a href="{{ value }}" class="footer-nav-link">{{ key }}</a>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</nav>
{% endif %}
<script>ApepLoader.register("footer-nav.css");</script>
{% 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 %}


{#
  Renders a breadcrumb navigation trail.
  The last item is always treated as the current page (no link, aria-current="page").
  All previous items are rendered as links.

  @param items     {list}   - list of {label, url} dicts. url is ignored on the last item.
  @param separator {string} - visual separator between items, default "/"
#}
{% macro breadcrumb(items, separator="/") %}
{% if not items %}
    {{ alert("breadcrumb: items is required", "Pass a list of {label, url} dicts.") }}
{% else %}
<nav class="breadcrumb" aria-label="Breadcrumb">
    <ol class="breadcrumb-list">
        {% for item in items %}
        <li class="breadcrumb-item {% if loop.last %}breadcrumb-item-current{% endif %}">
            {% if not loop.last %}
            <a href="{{ item.url }}" class="breadcrumb-link">{{ item.label }}</a>
            <span class="breadcrumb-separator" aria-hidden="true">{{ separator }}</span>
            {% else %}
            <span class="breadcrumb-current" aria-current="page">{{ item.label }}</span>
            {% endif %}
        </li>
        {% endfor %}
    </ol>
</nav>
<script>ApepLoader.register("breadcrumb.css");</script>
{% endif %}
{% endmacro %}


{#
  !! WIP - NOT READY FOR USE !!
  Pagination is not yet finalized. CSS and behavior are incomplete.
  Do not use in production templates until this notice is removed.

  Renders a pagination control with prev/next buttons and numbered page links.
  Pages near the current page are shown directly; distant pages are collapsed
  into ellipsis. The url_pattern must contain "{page}" as placeholder,
  e.g. "/blog/page/{page}" or "?page={page}".

  @param current     {number} - currently active page, 1-based
  @param total       {number} - total number of pages
  @param url_pattern {string} - URL template with {page} placeholder
  @param delta       {number} - how many pages to show around current, default 2
#}
{% macro pagination(current, total, url_pattern, delta=2) %}
{% if not current %}
    {{ alert("pagination: current is required", "Pass the current page number as the first argument.") }}
{% elif not total %}
    {{ alert("pagination: total is required", "Pass the total number of pages as the second argument.") }}
{% elif not url_pattern %}
    {{ alert("pagination: url_pattern is required", "Pass a URL template containing {page} as the third argument.") }}
{% else %}
{% set _prev = current - 1 %}
{% set _next = current + 1 %}
{% set _start = [1, current - delta] | max %}
{% set _end = [total, current + delta] | min %}
<nav class="pagination" aria-label="Pagination">
    <ul class="pagination-list">

        {# Prev button #}
        <li class="pagination-item">
            {% if current > 1 %}
            <a href="{{ url_pattern.replace('{page}', _prev | string) }}"
               class="pagination-btn pagination-prev"
               aria-label="Previous page">
                <span aria-hidden="true">&#8592;</span>
            </a>
            {% else %}
            <span class="pagination-btn pagination-prev pagination-btn-disabled" aria-disabled="true">
                <span aria-hidden="true">&#8592;</span>
            </span>
            {% endif %}
        </li>

        {# First page + ellipsis if needed #}
        {% if _start > 1 %}
        <li class="pagination-item">
            <a href="{{ url_pattern.replace('{page}', '1') }}" class="pagination-page">1</a>
        </li>
        {% if _start > 2 %}
        <li class="pagination-item pagination-ellipsis" aria-hidden="true">
            <span>...</span>
        </li>
        {% endif %}
        {% endif %}

        {# Page range around current #}
        {% for p in range(_start, _end + 1) %}
        <li class="pagination-item">
            {% if p == current %}
            <span class="pagination-page pagination-page-active" aria-current="page">{{ p }}</span>
            {% else %}
            <a href="{{ url_pattern.replace('{page}', p | string) }}" class="pagination-page">{{ p }}</a>
            {% endif %}
        </li>
        {% endfor %}

        {# Last page + ellipsis if needed #}
        {% if _end < total %}
        {% if _end < total - 1 %}
        <li class="pagination-item pagination-ellipsis" aria-hidden="true">
            <span>...</span>
        </li>
        {% endif %}
        <li class="pagination-item">
            <a href="{{ url_pattern.replace('{page}', total | string) }}" class="pagination-page">{{ total }}</a>
        </li>
        {% endif %}

        {# Next button #}
        <li class="pagination-item">
            {% if current < total %}
            <a href="{{ url_pattern.replace('{page}', _next | string) }}"
               class="pagination-btn pagination-next"
               aria-label="Next page">
                <span aria-hidden="true">&#8594;</span>
            </a>
            {% else %}
            <span class="pagination-btn pagination-next pagination-btn-disabled" aria-disabled="true">
                <span aria-hidden="true">&#8594;</span>
            </span>
            {% endif %}
        </li>

    </ul>
</nav>
<script>ApepLoader.register("breadcrumb.css");</script>
{% endif %}
{% endmacro %}