<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Log Analysis Report</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
        media="(prefers-color-scheme: light)">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
        media="(prefers-color-scheme: dark)">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
    <script type="text/javascript">
        MAX_DATA_POINTS = 1024;
        VIEWPORT_WIDTH = 1200;
        MAX_LEGENDS = 15;
        ANIMATION_DURATION = 100;
        ZOOM_OPTIONS = {
            zoom: {
                wheel: {
                    enabled: true
                },
                pinch: {
                    enabled: true
                },
                drag: {
                    enabled: true
                },
                mode: 'x'
            },
            pan: {
                enabled: true,
                mode: 'x',
                modifierKey: 'shift'
            },
            limits: {
                x: {
                    min: "original",
                    max: "original"
                }
            }
        };
        data = {};
        linkElms = [];
        titleElms = [];
        charts = [];

        Chart.register(ChartZoom);
        hljs.addPlugin(new CopyButtonPlugin({
            hook: (_, el) => el.textContent
        }));
        function getWindowHeight() {
            return window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight;
        }

        function getWindowWidth() {
            return window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
        }

        function highLightOutline() {
            for (var i = 0; i < titleElms.length; i++) {
                var rect = titleElms[i].getBoundingClientRect();
                var top = i == 0 ? 0 : rect.top;
                var bottom = i == titleElms.length - 1 ? document.body.scrollHeight : titleElms[i + 1].getBoundingClientRect().top;
                if (top < 1 && bottom > 1) {
                    linkElms[i].classList.add('in-view');
                } else {
                    linkElms[i].classList.remove('in-view');
                }
            }
        };
        function createList(li_elms) {
            var ul = document.createElement('ul');
            for (var i = 0; i < li_elms.length; i++) {
                var li = document.createElement('li');
                var link = document.createElement('a');
                linkElms.push(link);
                link.href = '#' + li_elms[i].id;
                link.textContent = li_elms[i].textContent;
                li.appendChild(link);
                ul.appendChild(li);
            }
            return ul;
        }
        window.onload = function () {
            var outline = document.getElementById('outline');
            var h2 = document.getElementsByTagName('h2');
            var ul = document.createElement('ul');
            var body = document.getElementsByClassName('markdown-body')[0];
            for (var i = 0; i < h2.length; i++) {
                titleElms.push(h2[i]);
                var li = document.createElement('li');
                var link = document.createElement('a');
                linkElms.push(link);
                link.href = '#' + h2[i].id;
                link.textContent = h2[i].textContent;
                var children = [];
                for (var next = h2[i].nextElementSibling; next && next.tagName !== 'H2'; next = next.nextElementSibling) {
                    if (next.tagName === 'H3') {
                        children.push(next);
                        titleElms.push(next);
                    }
                }
                ul.appendChild(li);
                li.appendChild(link);
                li.appendChild(createList(children));
            }
            outline.appendChild(ul);
            var outlineWidth = outline.offsetWidth;
            body.style.margin = '0 auto 0 ' + outlineWidth + 'px';
            expand = document.getElementById('expand-outline');
            collapse = document.getElementById('collapse-outline');
            b = outline.getElementsByTagName('b')[0];
            state = 1;
            states = [["none", "block"], ["none", "inline"], ["inline", "none"], ["none", "inline"], ["0 auto", '0 auto 0 ' + outlineWidth + 'px']];
            window.onresize = function () {
                blank = (getWindowWidth() - VIEWPORT_WIDTH) / 2;
                if (blank > outlineWidth) {
                    states = [["none", "block"], ["none", "inline"], ["inline", "none"], ["none", "inline"], ["0 auto", '0 auto 0 auto']];
                } else {
                    states = [["none", "block"], ["none", "inline"], ["inline", "none"], ["none", "inline"], ["0 auto", '0 auto 0 ' + outlineWidth + 'px']];
                }
                body.style.margin = states[4][state];
                for (var i = 0; i < charts.length; i++) {
                    charts[i].resize();
                }
            };
            click = function () {
                state = state == 0 ? 1 : 0;
                ul.style.display = states[0][state];
                b.style.display = states[1][state];
                expand.style.display = states[2][state];
                collapse.style.display = states[3][state];
                body.style.margin = states[4][state];
                return false;
            };
            collapse.onclick = click;
            expand.onclick = click;
            highLightOutline();
            window.onscroll = highLightOutline;
        };
        function generateRandomColor(alpha = 0.8) {
            const hue = Math.floor(Math.random() * 360);
            const saturation = Math.floor(Math.random() * 30) + 70; // 70-100%
            const lightness = Math.floor(Math.random() * 20) + 50;  // 50-70%
            return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
        }
        function genDefaultLegendLabels(chart) {
            const original = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            return original.map((label, index) => {
                const dataset = chart.data.datasets[index];
                const type = dataset.type;
                if (type === 'line') {
                    label.pointStyle = "line";
                    label.lineWidth = 4;
                } else if (type === 'bar' || type === "pie") {
                    label.pointStyle = "rect";
                } else {
                    label.pointStyle = "circle";
                }
                return label;
            });
        }
    </script>
    <style>
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 1200px;
            margin: 0 auto 0 350px;
            padding: 45px;
        }

        @media(max-width:90%) {
            .markdown-body {
                padding: 15px;
            }
        }

        #outline {
            position: fixed;
            top: 10px;
            left: 10px;
            padding: 40px 0;
        }

        .pie {
            display: inline-block;
            width: 45%;
        }

        .bar {
            display: inline-block;
            width: 100%;
        }

        a.in-view {
            background-color: var(--bgColor-default);
            color: var(--fgColor-default);
            font-weight: bold;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip::after {
            content: attr(data-tip);
            background: gray;
            color: white;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            top: 100%;
            white-space: nowrap;
            padding: 6px 8px;
            border-radius: 4px;
            border: solid 1px #ccc;
            font-size: 12px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s, transform .15s;
            z-index: 10;
            width: 100%;
            white-space: normal;
            box-sizing: border-box;
        }

        .tooltip:hover::after,
        .tooltip:focus::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .hljs-copy-wrapper {
            position: relative;
        }

        .hljs-copy-button {
            background-color: var(--bgColor-default);
            border: none;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            position: absolute;
            top: 8px;
            right: 8px;
            opacity: 0.6;
        }
    </style>
</head>

<body class="markdown-body">
    <script type="text/javascript">
        const ROOT_STYLES = getComputedStyle(document.body);
        const FG_COLOR = ROOT_STYLES.getPropertyValue('--fgColor-default').trim() || '#333333';
        const BG_COLOR = ROOT_STYLES.getPropertyValue('--bgColor-default').trim() || '#ffffff';
        Chart.defaults.color = FG_COLOR;
    </script>
    <div id="outline">
        <a href="#" id="collapse-outline">&#x25C0;</a>
        <b>Report Outline</b>
        <a href="#" style="display: none;" id="expand-outline">&#x25B6;</a>
    </div>
    {{ content }}
</body>

</html>