<head>
    <meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
    <title>{title}</title>

    <!-- TODO: EDIT HERE, load the scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

    <!-- TODO: EDIT HERE, load the css -->
    <link id="theme" rel="stylesheet" type="text/css" href="/static/xhs/dark.css">

    <style>
        body \{
            box-sizing: border-box;
            min-width: {body_min_width}px;
            max-width: {body_max_width}px;
            margin: 0 auto;
            padding: 45px;
        }
    </style>
</head>
<body>
    <!-- DON'T MODIFY THE FOLLOWING CONTENT -->
    <div class=markdown-body>
        {{ if use_slice_mode }}
            <!-- slice mode -->
            {{ for slice_content in slices }}
                <div class=slice-div id=slice-{ @index }>
                    <div class=slice-header>{slice_header}</div>
                    <div class=slice-content>{slice_content}</div>
                </div>
            {{ endfor }}
        {{ else }}
            <!-- normal mode -->
            { content }
        {{ endif }}
    </div>
    <!-- DON'T MODIFY THE ABOVE CONTENT -->

    <button onclick="convertDivToImage()">Convert to image</button>
    <button onclick="toggleTheme()">Toggle theme</button>

    <script>
        function convertDivToImage() \{
            const divs = document.querySelectorAll('.slice-div');
            divs.forEach((div, index) => \{
                html2canvas(div, \{scale: 2}).then(canvas => \{
                    // 将 Canvas 元素转换为图像并保存
                    const imgData = canvas.toDataURL('image/png');
                    const link = document.createElement('a');
                    link.download = 'xhs_image_' + index + '.png';
                    link.href = imgData;
                    link.click();
                });
            });
        }

        function toggleTheme() \{
            const currentTheme = document.getElementById("theme").getAttribute("href");
            const darkTheme = "/static/xhs/dark.css";
            const lightTheme = "/static/xhs/light.css";
            let newTheme = "";

            if (currentTheme == darkTheme) \{
                newTheme = lightTheme;
            } else \{
                newTheme = darkTheme;
            }

            document.getElementById("theme").setAttribute("href", newTheme);
        }

        function setTodayDate() \{
            // 获取明天日期
            const today = new Date();
            // 只加8个小时，这样如果是凌晨或白天处理图片就不会算到明天
            const tomorrow = new Date(today.getTime() + 8 * 60 * 60 * 1000);

            // 格式化日期
            const year = tomorrow.getFullYear();
            const month = tomorrow.getMonth() + 1;
            const day = tomorrow.getDate();
            const formattedDate = year + '/' + month + '/' + day;

            // 设置第一个span标签的内容
            const titleSpans = document.querySelectorAll('.dynamic-title');
            titleSpans.forEach(span => \{
                span.textContent = span.textContent + ' (' + formattedDate +  ')';
            });
        }

        // setTodayDate();
    </script>
</body>
