<!DOCTYPE html>
<html lang="zh-CN" id="html-root">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <!-- CSS 模块化架构 -->
    <link rel="stylesheet" href="/static/css/variables.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/animations.css">
    <link rel="stylesheet" href="/static/css/components.css">
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
    <!-- 連接狀態指示器 -->
    <div class="connection-status">
        <div class="connection-indicator" id="connectionIndicator"></div>
        <span id="connectionText">連接中...</span>
    </div>

    <!-- 等待會話的頁面 -->
    <div class="waiting-container" id="waitingContainer">
        <div class="waiting-content">
            <h1 class="waiting-title">MCP Feedback Enhanced</h1>
            <p class="waiting-description">
                Web UI 互動式回饋收集工具
            </p>
            <div class="waiting-status">
                等待 MCP 服務調用以建立回饋會話...
            </div>
        </div>
    </div>

    <!-- 主要回饋界面 -->
    <div class="main-container" id="mainContainer">
        <!-- 這裡將動態載入回饋界面內容 -->
    </div>

    <!-- JavaScript -->
    <script src="/static/js/i18n.js?v=20260316"></script>
    <!-- 載入所有模組 -->
    <script src="/static/js/modules/utils.js?v=20260316"></script>

    <script src="/static/js/modules/websocket-manager.js?v=20260316"></script>
    <script src="/static/js/modules/image-handler.js?v=20260316"></script>
    <script src="/static/js/modules/settings-manager.js?v=20260316"></script>
    <script src="/static/js/modules/ui-manager.js?v=20260316"></script>
    <script src="/static/js/modules/auto-refresh-manager.js?v=20260316"></script>
    <!-- 主應用程式 -->
    <script src="/static/js/app.js?v=20260316"></script>
</body>
</html>
