{% load manage_tags %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>后台中心</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        ul, li {
            list-style: none
        }

        a {
            text-decoration: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            min-width: 800px;
        }

        body {
            display: flex;
            flex-direction: column;
            background: #42485b;
            font-weight: 300;
            font-size: 14px;
            font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
        }

        .header {
            height: 50px;
        }

        .header header {
            height: 100%;
            display: flex;
            align-items: center;
            color: #f2f3f4;
            justify-content: space-between;
        }

        .header .title {
            width: 200px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            display: flex;
            background: #383e52;
            align-items: center;
        }

        .header .fa-cube {
            margin: 10px;
            font-size: 24px;
        }

        {#        .header .title:before{content: '\25A3';padding: 0px 10px; font-size: 20px;}#}

        .nav-list {
            flex: 1;
            overflow: hidden;
        }

        .nav-list ul {
            overflow-x: auto;
            white-space: nowrap;

        }

        .nav-list ul::-webkit-scrollbar {
            display: none
        }

        .nav-list li {
            display: inline-block;
            position: relative;
        }

        .nav-list li a {
            color: #f3f3f3;
            display: inline-block;
            height: 50px;
            line-height: 50px;
            min-width: 80px;
            text-align: center;
            padding: 0px 14px;
        }

        .nav-list li.active, .nav-list li:hover {
            color: #fff;
            background: #333744;
        }

        .nav-list li b {
            position: absolute;
            top: 0px;
            right: 5px;
            display: none;
            cursor: pointer;
        }

        .nav-list li b:hover {
            color: #00c1de;
        }

        .nav-list li:hover b {
            display: block;
        }

        .header .user-menu {
            position: relative;
            background: #383e52;
        }

        .header .user-menu > a {
            display: flex;
            align-items: center;
            height: 50px;
            color: #f3f3f3;
            min-width: 100px;
            padding: 0px 10px;
            text-align: right;
        }

        .header .user-menu > a:hover {
            color: #fff;
            background: #333744;
        }

        .header .user-menu > a:after {
            content: '';
            width: 0;
            height: 0;
            margin-left: 10px;
            font-size: 15px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid #f2f3f4;
        }

        .header .user-menu .menu-drown {
            display: none;
            position: absolute;
            top: 50px;
            right: 0px;
            min-width: 150px;
            background: #eaedec;
            -moz-box-shadow: 2px 2px 5px #666;
            -webkit-box-shadow: 2px 2px 5px #666;
            box-shadow: 2px 2px 5px #666;
        }

        .header .user-menu:hover .menu-drown {
            display: block;
        }

        .header .user-menu .menu-drown a {
            height: 40px;
            line-height: 40px;
            display: inline-block;
            width: 100%;
            text-align: center;
            color: #555;
        }

        .header .user-menu .menu-drown a:hover {
            background: #00c1de;
            color: #fff;
        }

        .header .user-menu .user-name {
            text-align: center;
        }

        .header .user-menu .menu-drown i.fa {
            margin-right: 8px;
        }

        .body {
            width: 100%;
            flex-grow: 1;
            display: flex;
            flex-direction: row;
        }

        .body .left {
            width: 200px;
            background: #eaedf1;
        }

        .body .right {
            flex-grow: 1;
            background: #fff;
            overflow: hidden;
        }

        .nav-main a {
            display: flex;
            align-items: center;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            padding-left: 25px;
            position: relative;
            color: #555;
        }

        .nav-main a:hover {
            color: #333;
        }

        .nav-main .nav-item {
            position: relative;
        }

        .nav-main .nav-item:not(:first-child) {
            border-top: 1px solid #ddd;
        }

        .nav-main .nav-item i {
            margin-right: 10px;
            font-size: 18px;
        }
        .nav-main .nav-item span {
            letter-spacing: 0.32rem;
        }

        .nav-main .nav-sub {
            display: none;
            background-color: #f4f6f8;
        }

        .nav-main .nav-sub li:not(:last-child) {
            border-bottom: 1px solid #dde9e5;
        }

        .nav-main .nav-sub a {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: normal;
            padding-left: 48px;
        }

        .nav-main .nav-sub a:hover::before {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            width: 4px;
            background-color: #00c1de;
            z-index: 1;
        }

        .nav-main .nav-sub a.exist {
            color: #FFF;
            background-color: #00c1de;
        }

        .nav-main .nav-sub li:last-child a {
            border-bottom: none;
        }

        #frame-wrap {
            width: 100%;
            height: 100%;
        }

        .iframe {
            border: none;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="header">
    <header>
        <div class="title">
            <i class="fa fa-cube" aria-hidden="true"></i>
            后台管理系统
        </div>
        <div class="nav-list">
            <ul id="nav-list">
            </ul>
        </div>
        <div class="user-menu">
            <a href="#">
                <img src="{{ STATIC_URL }}manage/images/user.png" width="32" height="32">
                <span class="user-name">&nbsp;&nbsp;{{ request.user.first_name|default:request.user.username|default:'管理员' }}</span>
            </a>
            <div class="menu-drown">
                <a class="a-menu" href="reset_password_index/"><i class="fa fa-lock" aria-hidden="true"></i>修改密码</a>
                <a href="{% url 'manage_logout' %}"><i class="fa fa-sign-out" aria-hidden="true"></i>退出系统</a>
            </div>
        </div>
        <div></div>
    </header>
</div>
<div class="body">
    <div class="left">
        {% auth_menus %}
    </div>
    <div class="right">
        <div id="frame-wrap">
{#            <i class="fa fa-balance-scale"></i>#}
        </div>
    </div>
</div>
<script src="{{ STATIC_URL }}vender/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
    $(function () {
        $(document).on("click", ".nav-main .nav-title", function (e) {
            e.preventDefault();
            var $this = $(this);
            $this.toggleClass("active").next("ul").slideToggle('fast');
            $this.parent('li').toggleClass("active");
            $this.parent('li').siblings().removeClass('active');
            $this.parent('li').siblings().children('.nav-title.active').next("ul").slideToggle('fast');
            $this.parent('li').siblings().children('.nav-title').removeClass('active');
        });

        $(document).on("click", ".a-menu", function (e) {
            e.preventDefault();
            var $this = $(this);
            var $pageRight = $("#frame-wrap");
            var $nav = $("#nav-list");
            var src = $this.attr("href");
            var id = src.replace(new RegExp("/", "g"), '-');
            var text = $this.text();
            var $navItem = $nav.find("a[href='" + id + "']");
            if (!$navItem.length) {
                var content = "<iframe class='iframe' frameborder='0' src='" + src + "'  id='" + id + "'></iframe>";
                var tabTemplate = "<li class='active'><a href='#{href}'>#{label}</a><b>×</b>";
                $nav.children(".active").removeClass("active");
                $nav.append(tabTemplate.replace(/#\{href\}/g, id).replace(/#\{label\}/g, text));
                $pageRight.children(".iframe").hide();
                $pageRight.append(content);
            }
            else {
                $navItem.parent().addClass("active").siblings().removeClass("active");
                $pageRight.children("#" + id).show().siblings(".iframe").hide();
            }
            $(".nav-sub .exist").removeClass("exist");
            $this.addClass("exist");
            return false;
        });


        //Tag的a标签点击事件，用于切换TagPage
        $(document).on("click", "#nav-list a", function (e) {
            e.preventDefault();
            if (!$(this).parent().hasClass("active")) {
                var $this = $(this);
                var id = $this.attr("href");
                $this.parents("#nav-list").find(".active").removeClass("active");
                $this.parent().addClass("active", 100);
                $("#frame-wrap").find('#' + id).show().siblings(".iframe").hide();
                $(".nav-sub .exist").removeClass("exist");
                var href = id.replace(new RegExp("-", "g"), '/');
                $(".nav-sub").find("a[href='" + href + "']").addClass("exist");
                return false;
            }
        });

        //Tag的关闭
        $(document).on("click", "#nav-list b", function (e) {
            e.preventDefault();
            var $a = $(this).siblings("a");
            var id = $a.attr("href");
            var $li = $(this).closest('li');
            if (true || $li.siblings().length) {
                if ($li.hasClass("active")) {
                    $li.siblings("li:first").children("a").trigger("click");
                }
                $li.remove();
                $("#frame-wrap").find("#" + id).remove();
                var href = id.replace(new RegExp("-", "g"), '/');
                $(".nav-sub").find("a[href='" + href + "']").removeClass("exist");
            }
        });
    });
</script>
</body>
</html>