<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uno - Tools Inspector</title>
    <link rel="stylesheet" href="/gui/static/css/style.css">
</head>
<body>
    <div class="app">
        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <span class="logo-icon">⚡</span>
                <span class="logo-text">Uno</span>
                <span class="version">v0.1.0</span>
            </div>
            <div class="user-info" id="user-info">
                <span id="user-name">未登录</span>
                <button class="login-btn" id="login-btn" onclick="login()">登录</button>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main">
            <!-- 左侧：Tools 列表 -->
            <section class="panel tools-panel">
                <div class="panel-header">
                    <h2>Tools</h2>
                    <button class="icon-btn" id="search-toggle" title="搜索">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                    </button>
                </div>
                
                <!-- 搜索框（默认隐藏） -->
                <div class="search-box" id="search-box" style="display: none;">
                    <input type="text" id="tool-search" placeholder="搜索工具..." oninput="filterTools()">
                </div>
                
                <div class="panel-body">
                    <button class="action-btn" onclick="listTools()">List Tools</button>
                    <button class="action-btn secondary" onclick="clearTools()">Clear</button>
                    
                    <ul class="tools-list" id="tools-list">
                        <!-- 动态填充 -->
                    </ul>
                </div>
            </section>

            <!-- 右侧：工具详情与测试 -->
            <section class="panel detail-panel">
                <div class="panel-header">
                    <h2 id="detail-title">选择工具</h2>
                </div>
                <div class="panel-body">
                    <div id="detail-content" class="detail-content">
                        <p class="placeholder">从左侧列表选择一个工具查看详情并运行</p>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="/gui/static/js/app.js"></script>
</body>
</html>
