{#
================================================================================
Action Bar Component (Kida-Native)
================================================================================

PATTERN: POPOVER
- Share dropdown and metadata panel use native [popover]
- Browser handles: show/hide, light dismiss, escape key, top layer
- JS handles: Copy actions, AI share functionality

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- {% def %} for reusable helper

USAGE:
{% include 'partials/action-bar.html' %}
================================================================================
#}

{# =============================================================================
HELPER: Get page URL with fallback chain
============================================================================= #}
{% def get_page_url(page) -%}
{{ (page?.href ?? page?._path ?? '/') | trim }}
{%- end %}

{# =============================================================================
BREADCRUMB ITEM HELPER
============================================================================= #}
{% def breadcrumb_item(item, has_metadata=false) %}
{% let item_title = item?.title ?? 'Page' %}
{% let item_href = item?.href ?? '#' %}
{% let is_current = item?.is_current ?? false %}
<li{{ ' aria-current="page"' | safe if is_current else '' }}>
    {% if is_current %}
    <span class="action-bar-breadcrumb-current-wrapper">
        <span class="action-bar-breadcrumb-current" title="{{ item_title }}"><bdi>{{ item_title | truncate(20, true, '…')
            }}</bdi></span>
        {% if has_metadata %}
        <button class="action-bar-meta-toggle" popovertarget="action-bar-metadata-popover"
            aria-label="Toggle page metadata" title="Show page details">
            {{ icon('caret-down', size=14, css_class='action-bar-meta-toggle-icon') }}
        </button>
        {% end %}
    </span>
    {% else %}
    <a href="{{ item_href | absolute_url }}" class="action-bar-breadcrumb-link" title="{{ item_title }}"><bdi>{{ item_title |
        truncate(28, true, '…') }}</bdi></a>
    {% end %}
    </li>
    {% end %}

    {# =============================================================================
    MAIN COMPONENT
    ============================================================================= #}

    {% if page %}
    {# Template-scoped variables #}
    {% let page_url = canonical_url(get_page_url(page)) %}
    {% let llm_txt_url = ensure_trailing_slash(page_url) ~ 'index.txt' %}
    {% let share_prompt = "Please help me understand this documentation: " ~ llm_txt_url %}

    {# Breadcrumbs - assign outside cache for variable access #}
    {% let breadcrumb_items = get_breadcrumbs(page) ?? [] %}

    {% let params = params ?? {} %}
    {% let has_metadata = (params?.author ?? none) or (page?.date ?? none) or (page?.content ?? none) or (params?.lastmod ?? none) %}
    {% let theme_features = theme?.features ?? [] %}

    <div class="action-bar-container">
        {# Main Action Bar #}
        <div class="action-bar">
            {# Left: Breadcrumbs #}
            <nav class="action-bar-nav" aria-label="Breadcrumb">
                {% if breadcrumb_items | length > 0 %}
                {% spaceless %}
                <ol class="action-bar-breadcrumbs">
                    {% for item in breadcrumb_items %}
                    {{ breadcrumb_item(item, has_metadata) }}
                    {% export last_breadcrumb = item %}
                    {% end %}
                </ol>
                {% end %}
                {% end %}
            </nav>

            {# Right: Actions #}
            <div class="action-bar-actions">
                {# LLM Share Button #}
                <div class="action-bar-share">
                    <button class="action-bar-share-trigger" popovertarget="action-bar-share-menu"
                        aria-label="{{ t('share.ai_assistants', default='Share with AI assistants') }}"
                        title="{{ t('share.ai_assistants', default='Share with AI assistants') }}">
                        <span>ᗢ</span>
                        {{ icon('caret-down', size=14, css_class='action-bar-share-chevron') }}
                    </button>

                    <div id="action-bar-share-menu" popover class="action-bar-share-dropdown--popover">
                        <div class="action-bar-share-content">
                            {# Quick Actions #}
                            <button class="action-bar-share-item" data-action="copy-url" data-url="{{ page_url }}"
                                type="button">
                                {{ icon('link', size=16) }}
                                <span>{{ t('share.copy_url', default='Copy URL') }}</span>
                            </button>

                            <a href="{{ llm_txt_url }}" target="_blank" rel="noopener noreferrer"
                                class="action-bar-share-item">
                                {{ icon('external', size=16) }}
                                <span>{{ t('share.open_llm_text', default='Open LLM text') }}</span>
                            </a>

                            <button class="action-bar-share-item" data-action="copy-llm-txt"
                                data-url="{{ llm_txt_url }}" type="button">
                                {{ icon('copy', size=16) }}
                                <span>{{ t('share.copy_llm_text', default='Copy LLM text') }}</span>
                            </button>

                            {% include 'partials/connect-to-ide.html' %}

                            <hr class="action-bar-share-separator">

                            {# AI Assistant Links #}
                            <div class="action-bar-share-section-header">{{ t('share.with_ai', default='Share with AI')
                                }}</div>

                            {% let ai_platforms = [
                            {'id': 'claude', 'name': 'Claude', 'icon': 'ai-claude', 'url': 'https://claude.ai/new?q='},
                            {'id': 'chatgpt', 'name': 'ChatGPT', 'icon': 'ai-chatgpt', 'url':
                            'https://chatgpt.com/?q='},
                            {'id': 'gemini', 'name': 'Gemini', 'icon': 'ai-gemini', 'url':
                            'https://gemini.google.com/app?q='},
                            {'id': 'copilot', 'name': 'Copilot', 'icon': 'ai-copilot', 'url':
                            'https://copilot.microsoft.com/?q='}
                            ] %}

                            {% for ai in ai_platforms %}
                            <a href="{{ ai.url ~ (share_prompt | urlencode) }}" target="_blank"
                                rel="noopener noreferrer" class="action-bar-share-item action-bar-share-ai"
                                data-ai="{{ ai.id }}">
                                {{ icon(ai.icon, size=16) }}
                                <span>{{ t('share.ask_' ~ ai.id, default='Ask ' ~ ai.name) }}</span>
                            </a>
                            {% end %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Expandable Metadata Panel #}
        {% if has_metadata %}
        <div id="action-bar-metadata-popover" popover class="action-bar-metadata--popover">
            <div class="action-bar-metadata-content">
                {% with (params?.author ?? none) as author %}
                {% if author and 'content.author' in theme_features %}
                <span class="action-bar-meta-item">
                    {{ icon("user", size=16) }}
                    <span>{{ author }}</span>
                </span>
                {% end %}
                {% end %}

                {% with page?.word_count as wc %}
                {% if wc %}
                {% if 'content.reading_time' in theme_features %}
                <span class="action-bar-meta-item">
                    {{ icon("clock", size=16) }}
                    <span>{{ t('meta.reading_time', {'time': page.reading_time}, default='{time} min read')
                        }}</span>
                </span>
                {% end %}

                <span class="action-bar-meta-item">
                    {{ icon("file-text", size=16) }}
                    <span>{{ t('meta.word_count', {'count': wc}, default='{count} words')
                        }}</span>
                </span>
                {% end %}
                {% end %}

                {% with (params?.lastmod ?? page?.date ?? none) as last_updated %}
                {% if last_updated %}
                <span class="action-bar-meta-item">
                    {{ icon("arrow-clockwise", size=16) }}
                    <span>{{ t('meta.updated', {'time': last_updated | time_ago}, default='Updated {time}') }}</span>
                </span>
                {% end %}
                {% end %}
            </div>
        </div>
        {% end %}
    </div>
    {% end %}