{#
   EwoooC base v3.0 — Production
   ─────────────────────────────────────────────────────────────
   變更重點：
     1. 移除原本 540 行 inline CSS 全站漸層覆蓋（page-header gradient、bg-primary 強蓋等）
     2. 群組 accent 改由 _ewoooc_shell.html 設置 [data-page-group]，自動切換暖色
     3. 字型切到 v3 token 規範（Inter + JetBrains Mono + Noto Sans TC）
     4. Bootstrap override 改為精準作用於 .momo-app 內部，不污染外部 widget
#}
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{% block title %}EwoooC{% endblock %}</title>
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/logo_circle.svg') }}">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-tokens.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-tokens-v2-alias.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-shell.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-dotmatrix.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/analysis-report-tabs.css') }}">
    {% if active_page|default('') in [
        'obs_overview', 'obs_agent_orchestration', 'obs_business_intel',
        'obs_host_health', 'obs_ai_calls', 'obs_budget',
        'obs_promotion_review', 'obs_rag_queries', 'obs_quality_trend',
        'obs_ppt_audit'
    ] %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/observability-system.css') }}">
    {% endif %}
    {% block extra_css %}{% endblock %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-v3-page-guard.css') }}">
    {% block extra_head %}{% endblock %}

    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-bootstrap-overrides.css') }}">
</head>
<body class="momo-v2-body {% if active_page|default('') in [
    'obs_overview', 'obs_agent_orchestration', 'obs_business_intel',
    'obs_host_health', 'obs_ai_calls', 'obs_budget',
    'obs_promotion_review', 'obs_rag_queries', 'obs_quality_trend',
    'obs_ppt_audit'
] %}momo-observability-mode{% endif %}">

    {# 群組映射 — Jinja 計算 [data-page-group] #}
    {% set _page = active_page|default('') %}
    {% set _group_monitor = ['dashboard', 'edm', 'campaigns'] %}
    {% set _group_analytics = ['sales', 'daily_sales', 'monthly', 'growth', 'metabase', 'grist'] %}
    {% set _group_ops = ['vendor_stockout', 'auto_import', 'market_intel'] %}
    {% set _group_ai = ['ai_recommend', 'ai_history', 'ai_intelligence',
                       'pchome_crawler', 'price_comparison', 'trends',
                       'obs_overview', 'obs_agent_orchestration', 'obs_business_intel',
                       'obs_host_health', 'obs_ai_calls', 'obs_budget',
                       'obs_promotion_review', 'obs_rag_queries', 'obs_quality_trend',
                       'obs_ppt_audit'] %}
    {% set _group_system = ['settings', 'system_settings', 'logs', 'crawler',
                           'user_management', 'login_history', 'change_password',
                           'notification_templates', 'ai_automation_smoke',
                           'brand_assets', 'code_review', 'cicd'] %}
    {% if _page in _group_monitor %}{% set _page_group = 'monitor' %}
    {% elif _page in _group_analytics %}{% set _page_group = 'analytics' %}
    {% elif _page in _group_ops %}{% set _page_group = 'ops' %}
    {% elif _page in _group_ai %}{% set _page_group = 'ai' %}
    {% elif _page in _group_system %}{% set _page_group = 'system' %}
    {% else %}{% set _page_group = 'monitor' %}
    {% endif %}

    <div class="momo-app momo-shell" id="momo-shell"
         data-active-page="{{ _page }}"
         data-page-group="{{ _page_group }}">

        {% include 'components/_ewoooc_shell.html' %}

        {% set _next_run = next_run|default(None) %}
        {% set _session_username = session.get('username') if session is defined else None %}
        {% set _session_role = session.get('role') if session is defined else None %}
        {% set _is_logged_in = session.get('logged_in') if session is defined else false %}

        <section class="momo-main-shell">
            <header class="momo-topbar">
                <button class="momo-mobile-menu-button" type="button" data-momo-sidebar-toggle aria-label="開啟主選單">
                    <i class="fas fa-bars"></i>
                </button>

                <form class="momo-search-box" role="search" method="GET" action="/">
                    <i class="fas fa-search" aria-hidden="true"></i>
                    <input class="momo-search-input" type="search" name="q" value="{{ search_query|default('') }}" placeholder="搜尋商品名稱、編號、品牌">
                    <kbd class="momo-shortcut">⌘K</kbd>
                </form>

                <div class="momo-topbar-spacer"></div>

                {% if _next_run %}
                    <div class="momo-topbar-pill">
                        <span class="momo-live-dot"></span>
                        <span>下次排程</span>
                        <strong>{{ _next_run }}</strong>
                    </div>
                {% endif %}

                <a class="momo-icon-button momo-obs-link" href="/observability/overview" title="AI 觀測台" id="momo-obs-link">
                    <i class="fas fa-satellite-dish"></i>
                    <span id="momo-obs-badge" class="momo-obs-badge" hidden></span>
                </a>
                <button class="momo-icon-button" type="button" title="說明">
                    <i class="fas fa-circle-question"></i>
                </button>
                <button class="momo-icon-button" type="button" title="通知">
                    <i class="fas fa-bell"></i>
                </button>

                {% if _is_logged_in %}
                    <button class="momo-user-chip" type="button">
                        <span class="momo-avatar">{{ (_session_username or '已')[:1] }}</span>
                        <span class="momo-user-meta">
                            <span class="momo-user-name">{{ _session_username or '已登入' }}</span>
                            {% if _session_role %}
                                <span class="momo-user-role">{{ _session_role }}</span>
                            {% endif %}
                        </span>
                        <i class="fas fa-chevron-down" aria-hidden="true" style="font-size:10px;color:var(--momo-text-tertiary)"></i>
                    </button>
                {% endif %}
            </header>

            <main class="momo-content">
                {% block content %}{% block ewooo_content %}{% endblock %}{% endblock %}
            </main>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    {# MOMO 404 防呆攔截：避免無效商品連結導向 EC404 #}
    <script src="{{ url_for('static', filename='js/ewoooc-base.js') }}"></script>

    {% if active_page|default('') in [
        'obs_overview', 'obs_agent_orchestration', 'obs_business_intel',
        'obs_host_health', 'obs_ai_calls', 'obs_budget',
        'obs_promotion_review', 'obs_rag_queries', 'obs_quality_trend',
        'obs_ppt_audit'
    ] %}
    <script src="{{ url_for('static', filename='js/observability-system.js') }}"></script>
    {% endif %}
    {% block extra_js %}{% endblock %}
    {% block extra_scripts %}{% endblock %}
</body>
</html>
