{# 分析報表第二層分頁：保留頁面內容與圖表邏輯，只提供一致的報表切換入口。 #}
{% set _analysis_active = active_page|default('') %}
<style>
    .analysis-report-tabs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 18px;
        padding: 8px;
        border: 1px solid var(--momo-border-light, rgba(42, 37, 32, 0.16));
        border-radius: 8px;
        background: var(--momo-bg-elevated, #fdfaf2);
        box-shadow: var(--momo-shadow-md, 0 0 0 1px rgba(42, 37, 32, 0.10));
    }
    .analysis-report-tabs-spacer {
        flex: 1 1 auto;
        min-width: 8px;
    }
    .analysis-report-tab {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid transparent;
        border-radius: 7px;
        color: var(--momo-text-secondary, #645c52);
        text-decoration: none;
        font-family: var(--momo-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
        font-size: var(--momo-text-body-sm, 13px);
        font-weight: 700;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    }
    .analysis-report-tab:hover {
        border-color: var(--momo-border-light, rgba(42, 37, 32, 0.16));
        background: var(--momo-bg-surface, #faf7f0);
        color: var(--momo-text-primary, #2a2520);
    }
    .analysis-report-tab.is-active {
        border-color: var(--momo-page-accent-dark, #a95846);
        background: var(--momo-page-accent, #c89043);
        color: var(--momo-page-inverse, #fff8ef);
    }
    .analysis-report-tab.is-external {
        border-color: var(--momo-border-light, rgba(42, 37, 32, 0.16));
        background: var(--momo-bg-surface, #faf6ec);
        font-family: var(--momo-font-family-mono, "SF Mono", Menlo, Consolas, monospace);
        font-size: 0.78rem;
    }
    .analysis-report-tab i {
        color: currentColor !important;
    }
</style>
<nav class="analysis-report-tabs" aria-label="分析報表分頁">
    <a class="analysis-report-tab {% if _analysis_active == 'sales' %}is-active{% endif %}"
       {% if _analysis_active == 'sales' %}aria-current="page"{% endif %}
       href="/sales_analysis">
        <i class="fas fa-chart-bar"></i>業績分析
    </a>
    <a class="analysis-report-tab {% if _analysis_active == 'daily_sales' %}is-active{% endif %}"
       {% if _analysis_active == 'daily_sales' %}aria-current="page"{% endif %}
       href="/daily_sales">
        <i class="fas fa-calendar-day"></i>當日業績
    </a>
    <a class="analysis-report-tab {% if _analysis_active == 'growth' %}is-active{% endif %}"
       {% if _analysis_active == 'growth' %}aria-current="page"{% endif %}
       href="/growth_analysis">
        <i class="fas fa-chart-line"></i>成長分析
    </a>
    <a class="analysis-report-tab {% if _analysis_active == 'monthly' %}is-active{% endif %}"
       {% if _analysis_active == 'monthly' %}aria-current="page"{% endif %}
       href="/monthly_summary_analysis">
        <i class="fas fa-table"></i>月份總表
    </a>
    {% if metabase_url or grist_url %}
    <span class="analysis-report-tabs-spacer" aria-hidden="true"></span>
    {% endif %}
    {% if metabase_url %}
    <a class="analysis-report-tab is-external" href="{{ metabase_url }}" target="_blank" rel="noopener">
        <i class="fas fa-chart-pie"></i>Metabase <i class="fas fa-up-right-from-square"></i>
    </a>
    {% endif %}
    {% if grist_url %}
    <a class="analysis-report-tab is-external" href="{{ grist_url }}" target="_blank" rel="noopener">
        <i class="fas fa-table"></i>Grist <i class="fas fa-up-right-from-square"></i>
    </a>
    {% endif %}
</nav>