<!DOCTYPE html>
<html lang="<?=Mvc::$cfg['locale'] ?? 'zh-CN'?>">
<head>
<meta charset="utf-8">
<title><?=$pageTitle?></title>
<link rel="stylesheet" href="<?=Mvc::$cfg['staticUrl']?>/js/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="<?=Mvc::$cfg['staticUrl']?>/css/adminLayout.css">
<script>
window.APP = <?=json_encode([
    'HOST'       => HOST,
    'STATIC_URL' => Mvc::$cfg['staticUrl'],
    'LOCALE'     => Mvc::$cfg['locale'] ?? 'zh-CN',
], JSON_UNESCAPED_UNICODE)?>;
</script>
<script src="<?=Mvc::$cfg['staticUrl']?>/js/jquery-3.7.1.min.js"></script>
<script src="<?=Mvc::$cfg['staticUrl']?>/js/lib/adminLayout.js"></script>
</head>
<body>
<?php
/**
 * 递归渲染菜单（支持任意层级）：有 children 的是分组，没有 children 只有 url 的是叶子菜单项
 * 标题已经在 config/admin.php 里用 lg('中文原文') 翻译过了，这里直接输出即可，不要再包一层 lg()
 */
function renderAdminMenu(array $nodes, bool $isRoot = false): void
{
    echo '<ul class="' . ($isRoot ? 'menu-root' : 'menu-children') . '">';
    foreach ($nodes as $node) {
        if (!empty($node['children'])) {
            echo '<li class="menu-group">';
            echo '<div class="menu-group-title">';
            if (!empty($node['icon'])) {
                echo '<i class="fa ' . htmlspecialchars($node['icon']) . '"></i>';
            }
            echo '<span class="menu-text">' . htmlspecialchars($node['title']) . '</span>';
            echo '<i class="fa fa-chevron-down menu-caret"></i>';
            echo '</div>';
            renderAdminMenu($node['children']);
            echo '</li>';
        } else {
            echo '<li class="menu-item" data-url="' . htmlspecialchars($node['url']) . '" data-title="' . htmlspecialchars($node['title']) . '">';
            echo '<span class="menu-text">' . htmlspecialchars($node['title']) . '</span>';
            echo '</li>';
        }
    }
    echo '</ul>';
}
?>
<div id="appShell">
    <div id="sidebar">
        <div id="sidebarHeader">
            <i class="fa fa-bars"></i><span class="logo-text">PDC</span>
        </div>
        <div id="sidebarMenu"><?php renderAdminMenu($menu, true); ?></div>
    </div>

    <div id="main">
        <div id="tabBar">
            <div id="refreshBtn" class="icon-btn" title="<?=lg('刷新')?>"><i class="fa fa-refresh"></i></div>
            <div id="tabs">
                <div class="tab-item active" data-id="home"><i class="fa fa-home"></i></div>
            </div>
            <div id="tabBarRight">
                <div class="toolbar-dropdown" id="tabActionsDropdown">
                    <div class="toolbar-dropdown-label"><i class="fa fa-caret-down"></i></div>
                    <div class="dropdown-menu" id="tabActionsMenu">
                        <div data-action="close"><?=lg('关闭')?></div>
                        <div data-action="closeOthers"><?=lg('关闭其他选项卡')?></div>
                        <div data-action="closeRight"><?=lg('关闭右侧选项卡')?></div>
                        <div data-action="closeLeft"><?=lg('关闭左侧选项卡')?></div>
                        <div data-action="closeAll"><?=lg('关闭全部选项卡')?></div>
                    </div>
                </div>

                <div class="toolbar-dropdown" id="notifyDropdown">
                    <div class="toolbar-dropdown-label">
                        <i class="fa fa-bell"></i>
                        <span id="notifyBadge">19</span>
                    </div>
                    <div class="dropdown-menu"></div>
                </div>

                <div class="toolbar-dropdown" id="userMenu">
                    <div class="toolbar-dropdown-label">
                        <?=htmlspecialchars($username)?> <i class="fa fa-caret-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <div data-action="profile"><?=lg('修改资料')?></div>
                        <div data-action="logout"><?=lg('退出')?></div>
                    </div>
                </div>

                <div class="toolbar-dropdown" id="langMenu">
                    <div class="toolbar-dropdown-label">
                        <?=(Mvc::$cfg['locale'] ?? 'zh-CN') === 'en' ? 'EN' : '中'?> <i class="fa fa-caret-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <div data-lang="zh-CN">中文</div>
                        <div data-lang="en">English</div>
                    </div>
                </div>
            </div>
        </div>

        <div id="contentArea">
            <div class="tab-pane active" data-id="home">
                <div class="home-placeholder"><?=lg('首页')?></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
