<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ .title }} - 祈福小助手管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/@inertiajs/vue3@1.0.0/dist/index.umd.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">
    <div id="app" data-page='{"component":"{{ .page }}","props":{},"url":"{{ .url }}","version":""}'></div>
    
    <script>
        const { createApp, h } = Vue;
        const { createInertiaApp } = Inertia;

        createInertiaApp({
            resolve: name => {
                const pages = {
                    dashboard: () => import('/static/js/pages/Dashboard.js'),
                    users: () => import('/static/js/pages/Users.js'),
                    orders: () => import('/static/js/pages/Orders.js'),
                    wishes: () => import('/static/js/pages/Wishes.js'),
                    settings: () => import('/static/js/pages/Settings.js'),
                };
                return pages[name] ? pages[name]() : pages.dashboard();
            },
            setup({ el, App, props, plugin }) {
                createApp({ render: () => h(App, props) })
                    .use(plugin)
                    .mount(el);
            },
        });
    </script>
</body>
</html>
