<!DOCTYPE html>
<html lang="{LANG}" xmlns="http://www.w3.org/1999/xhtml" xml:lang="{LANG}">
<head>
    <!-- Site Title-->
    <title>{%TITLE%}</title>
    {%META%}
    <!-- META -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, height=device-height, initial-scale=0.5, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="author" content="JMY CORE"/>
    <title>[alang:control_panel] | [alang:auth]</title>
    <base href="{URL}"/>
    <!-- FAVICON -->
    <link rel="shortcut icon" href="{%THEME%}/images/favicon.ico"/>
    <!-- MAIN CSS -->
    <link rel="stylesheet" type="text/css" href="{%THEME%}/css/admin-forms.css"/>
    <link rel="stylesheet" type="text/css"
          href="//fonts.googleapis.com/css?family=Lato:300,400,600,700%7CMontserrat:400,700"/>
    <link rel="stylesheet" type="text/css" href="{%THEME%}/css/theme.css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
          integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
    <script type="text/javascript">
        $(document).on('click', '.toggle-adminpass', function () {
            $(this).toggleClass("fa-eye fa-eye-slash");
            const input = $("#password");
            input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
        });
    </script>
    <script type="text/javascript">
        const $buoop = {vs: {i: 10, f: -4, o: -4, s: 7, c: -4}, api: 4};

        function $buo_f() {
            const e = document.createElement("script");
            e.src = "{%THEME%}/js/update.min.js";
            document.body.appendChild(e);
        };
        try {
            document.addEventListener("DOMContentLoaded", $buo_f, false)
        }
        catch (e) {
            window.attachEvent("onload", $buo_f)
        }
    </script>
</head>
<body class="external-page sb-l-c sb-r-c">
<div id="main" class="animated fadeIn">
    <section id="content_wrapper">
        <div id="canvas-wrapper">
            <canvas id="demo-canvas"></canvas>
        </div>
        <section id="content">
            <div class="admin-form theme-info">
                <div class="row table-layout">
                    <div class="col-xs-12 pln text-center hidden-xs">{%BARS%}</div>
                </div>
                <div class="panel panel-yellow panel-border top">
                    <div class="panel-heading">
                        <span class="panel-title col-sm-5 br-grey pl30">{%STEP%}</span>
                    </div>
                    <div class="heading-hr"></div>
                    <div class="panel-body pn table-responsive">
                        {%CONTENT%}
                    </div>
                </div>
                <div class="login-links">
                    <p class="text-center">{%Copyright%}</p>
                </div>
            </div>
        </section>
    </section>
</div>
<script src="{%THEME%}/js/core.min.js" type="text/javascript"></script>
<script src="{%THEME%}/js/utility.js" type="text/javascript"></script>
<script src="{%THEME%}/js/demo.js" type="text/javascript"></script>
<script src="{%THEME%}/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        "use strict";
        Core.init();
        CanvasBG.init({
            Loc: {
                x: window.innerWidth / 2,
                y: window.innerHeight / 3.3
            },
        });
    });
</script>
</body>
</html>
