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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{{pkg.name}}-{{name}}</title>
    <link href="/{{normalize}}/normalize.css" type="text/css" rel="stylesheet" />
    <script src="/{{es6Shim}}/es6-shim.js"></script>
    <script src="/{{es6Shim}}/es6-sham.js"></script>
    <script src="/{{es5Shim}}/es5-shim.js"></script>
    <script src="/{{es5Shim}}/es5-sham.js"></script>
    <script src="/{{consolePolyfill}}/index.js"></script>
    <script src="/{{public}}/modernizr.js"></script>
    <script src="/{{public}}/qrcode.js"></script>
    <script src="/{{fastclick}}/lib/fastclick.js"></script>
    <link rel="stylesheet" type="text/css" href="/{{highlightJs}}/styles/github.css"> {{#if(hasCss)}}
    <link rel="stylesheet" type="text/css" href="./{{name}}.css"> {{/if}}
    <script>
        if (!window.Promise) {
            document.writeln('<script src="/{{es6Promise}}/dist/es6-promise.js"' + '>' + '<' + '/' + 'script>');
        }
    </script>
    <style>
        .highlight {
            background-color: transparent;
            padding-top: 1px;
            position: relative;
        }

        .highlight pre {
            font-family: Consolas, "Liberation Mono", Courier, monospace;
            margin: 0;
            border: 1px solid #eee;
            padding: 16px;
            overflow: auto;
            border-radius: 2px;
            background-color: #f8f8f9;
            line-height: 19px;
            font-size: 13px;
            white-space: pre;
        }

        .highlight pre code {
            color: #5D6A6A;
            background-color: transparent;
            margin: auto;
            padding: 0;
        }

        .highlight pre code .hljs-comment {
            color: #5D6A6A;
        }

        .highlight pre code .hljs-number,
        .highlight pre code .hljs-hexcolor {
            color: #008030;
        }

        .highlight pre code .hljs-attribute,
        .highlight pre code .hljs-variable {
          color: #007A7A;
        }

        .highlight pre code .hljs-built_in {
            color: #0079A3;
        }

        html,
        body {
            height: 100vh;
        }

        * {
            box-sizing: border-box;
        }

        .navbar {
            transition: all 0.3s;
            background: #fff;
            box-shadow: 0 2px 8px #f0f1f2;
            position: relative;
            width: 100%;
            z-index: 10;
            max-width: 100%;
            position: absolute;
            top: 0;
            display: flex;
        }

        .navbar a {
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            font-size: 16px;
            font-weight: 500;
            height: 64px;
            line-height: 64px;
            padding-left: 16px;
            text-align: left;
            flex: 1;
        }

        .navbar .qrcode {
            height: 64px;
            width: 64px;
            float: left;
        }

        .main {
            height: 100%;
            box-sizing: border-box;
            padding-top: 64px;
            display: block;
            transition: .3s all;
        }

        .main .demo {
            flex: 1;
            transition: .3s all;
            padding: 15px;
            min-height: 200px;
        }

        .main .highlight {
            flex: 1.2;
            transition: .3s all;
        }

        .main pre {
            height: 100%;
        }

        .modal {
            position: absolute;
            left: -100%;
            top: 100px;
            transition: 0.3s all;
            z-index: 99;
            padding: 50px;
            box-shadow: 0 2px 8px #f0f1f2;
            background-color: #fff;
        }

        .openQrcode {
            width: 80px;
        }

        .openQrcode img {
            width: 32px;
            height: 32px;
            margin: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="modal" id="modal">
        <div id="qrcode" class="qrcode"></div>
    </div>
    <header class="navbar">
        <div id="out" class="openQrcode">
            <img alt="back" src="/{{public}}/out.svg" />
        </div>
        <a id="reload">{{pkg.name}}@{{pkg.version}}</a>
        <div id="changePadding" class="openQrcode">
            <img alt="change-padding" src="/{{public}}/padding.svg" />
        </div>
        <div id="openQrcode" class="openQrcode">
            <img alt="qrcode" src="/{{public}}/qrcode.svg" />
        </div>
        <div id="change" class="openQrcode">
            <img alt="change view" src="/{{public}}/change.svg" />
        </div>
    </header>
    <section class="main" id="main">
        <div id="__vue-content" class="demo"><div id="__vue-root"></div></div>
        {{{content}}}
    </section>
    <script>FastClick.attach(document.body);</script>
    <script src="./{{name}}.js"></script>
    <script>
        if (localStorage && localStorage.getItem('layout') === "top") {
            document.getElementById("main").style.display = "block";
        }
        if (localStorage && localStorage.getItem('layout') === "left") {
            document.getElementById("main").style.display = "flex";
        }
        document.getElementById('modal').style.left = "-100%";
        document.getElementById('openQrcode').onclick = function () {
            if (document.getElementById('modal').style.left !== "-100%") {
                document.getElementById('modal').style.left = "-100%";
                return;
            }
            var left = (innerWidth - 356) / 2 + "px";
            document.getElementById('modal').style.left = left;
        }

        document.getElementById('changePadding').onclick = function () {
            var content = document.getElementById('__vue-content');

            if (content.style.padding === "0px") {
                content.style.padding = "16px";
            } else {
                content.style.padding = 0;
            }
        }

        document.getElementById('reload').onclick = function () {
            location.reload();
        }
        document.getElementById('out').onclick = function () {
            history.back();
        }

        document.getElementById('modal').onclick = function () {
            document.getElementById('modal').style.left = "-100%";
        }

        document.getElementById('change').onclick = function () {
            var display = getComputedStyle(document.getElementById("main")).display;
            if (display !== "block") {
                document.getElementById("main").style.display = "block";
                if (localStorage) {
                    localStorage.setItem('layout', 'top');
                }
                return;
            }
            if (localStorage) {
                localStorage.setItem('layout', 'left');
            }
            document.getElementById("main").style.display = "flex";
        }
    </script>
</body>

</html>