{{define "content"}}
<!-- Dashboard / Welcome Panel -->
<div id="panel-welcome" class="tool-panel active">
    <header class="page-header">
        <h1>探索工具箱</h1>
        <p>欢迎使用个人生产力助手，点击下方卡片开始工作。</p>
    </header>
    
    <div id="tools-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;">
        <!-- JS 动态注入 -->
    </div>
</div>

<!-- Tools Panels Containers -->
{{template "zitie" .}}
{{template "learn_number" .}}

<script>
    // 首页 Tile 渲染
    async function renderDashboard() {
        try {
            const response = await fetch('/api/tools');
            const tools = await response.json();
            const grid = document.getElementById('tools-grid');
            grid.innerHTML = '';
            tools.forEach(tool => {
                const card = document.createElement('div');
                card.className = 'card';
                card.style.cssText = 'cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 12px; height: 100%;';
                card.innerHTML = `
                    <div style="font-size: 40px;">${tool.emoji || '🛠️'}</div>
                    <h3 style="margin: 0; font-size: 20px; font-weight: 700;">${tool.name}</h3>
                    <p style="margin: 0; color: #86868b; font-size: 15px; line-height: 1.4;">${tool.desc}</p>
                `;
                card.onclick = () => navigateTo(`/${tool.id}`);
                card.onmouseover = () => card.style.transform = 'translateY(-5px)';
                card.onmouseout = () => card.style.transform = 'translateY(0)';
                grid.appendChild(card);
            });
        } catch (e) { console.error(e); }
    }

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', () => {
        renderDashboard();
    });
</script>
{{end}}