{% extends theme("layout.html") %}
{% block head %}
    {{ super() }}

    <style type="text/css">

        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        label>span {
            color: deepskyblue;
        }

        .table {
            font-size: 12px;
            border-width: 1px;
            line-height: 20px;
        }
        .table > thead > tr > th,
        .table > tfoot > tr > th {
            color: #999999;
            font-weight: normal;
            border-bottom: 0 solid #e1e6eb;
            background-color: #F5F6FA;
        }

        .table > tbody > tr > td {
            color: #424547;
        }

        .table-bordered > tbody > tr {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .table-bordered > thead > tr > th,
        .table-bordered > tbody > tr > th,
        .table-bordered > tfoot > tr > th,
        .table-bordered > thead > tr > td,
        .table-bordered > tbody > tr > td,
        .table-bordered > tfoot > tr > td {
            border-style: solid;
            border-width: 1px 0 0 0;
        }

        #batch_change_disk_quota_form label {
            padding-left: 0;
            padding-right: 0;
        }

        .btn,
        .form-group>div>div,
        .form-control {
            border-radius: 0;
        }

        .bootstrap-switch-handle-on {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
    </style>
{% endblock head %}
{% block content %}
    <script>
        var sheet_tag = window.location.hash;

        $(document).ready(function() {
            $('body').addClass('add-transition');
            $('.add-page-transition').on('click', function(){
                var transAttr = $(this).attr('data-transition');
                $('.add-transition').attr('class', 'add-transition');
                $('.add-transition').addClass(transAttr);
            });

            $('#storage_mode').on('changed.bs.select', function (me) {
                if ($('#storage_mode').val() == '2' || $('#storage_mode').val() == '3') {
                    $('#dfs_volume_label').css('display', 'unset');
                    $('#dfs_volume').css('display', 'unset');
                } else {
                    $('#dfs_volume_label').css('display', 'none');
                    $('#dfs_volume').css('display', 'none');
                }
            });

            register_iops_bps_event();
            refresh_ip_pools();
            tokens_list_refresh();
            vlans_list_refresh();

            $('input.input-switch[name="activity"]').on('switchChange.bootstrapSwitch', function(event, state) {
                console.log(this); // DOM element
                console.log(event); // jQuery event
                console.log(state); // true | false
                if (state) {
                    put_ip_pool_activity($(this).data('id'));
                }
            });

            $('#reserved_ip_modal').on('show.bs.modal', function (me) {
                reserved_ip_refresh();
            });

            $("#reserved_ip_input").keydown(function() {
                if (event.keyCode == "13") {//keyCode=13是回车键
                    add_reserved_ip($('#reserved_ip_input').val())
                }
            });

            nav_to_sheet_tag();
        });

        function refresh() {
            window.location.reload();
        }

        function select_this(me) {
            $(me).parent().parent().children().removeClass('active');
            $(me).parent().addClass('active');

            $('#view_by_jimv_system_config, #view_by_quota, #view_by_ip_pool, #view_by_vlan, #view_by_auxiliary, #view_by_token').css('display', 'none');

            if (me.id === 'view_by_quota_label') {
                $('#view_by_quota').css('display', 'unset');
                history.replaceState(null, null, window.location.pathname);
                window.location.hash = "quota";

            } else if (me.id === 'view_by_ip_pool_label') {
                $('#view_by_ip_pool').css('display', 'unset');
                history.replaceState(null, null, window.location.pathname);
                window.location.hash = "ip_pool";

            } else if (me.id === 'view_by_vlan_label') {
                $('#view_by_vlan').css('display', 'unset');
                history.replaceState(null, null, window.location.pathname);
                window.location.hash = "vlan";

            } else if (me.id === 'view_by_token_label') {
                $('#view_by_token').css('display', 'unset');
                history.replaceState(null, null, window.location.pathname);
                window.location.hash = "token";

            } else if (me.id === 'view_by_auxiliary_label') {
                $('#view_by_auxiliary').css('display', 'unset');
                history.replaceState(null, null, window.location.pathname);
                window.location.hash = "auxiliary";

            } else {
                $('#view_by_jimv_system_config').css('display', 'unset');
                history.replaceState(null, null, ' ');
            }
        }

        function nav_to_sheet_tag() {
            var view_by_jimv_system_config_label = $('#view_by_jimv_system_config_label');
            var view_by_quota_label = $('#view_by_quota_label');
            var view_by_ip_pool_label = $('#view_by_ip_pool_label');
            var view_by_vlan_label = $('#view_by_vlan_label');
            var view_by_token_label = $('#view_by_token_label');
            var view_by_auxiliary_label = $('#view_by_auxiliary_label');

            view_by_jimv_system_config_label.parent().parent().children().removeClass('active');
            $('#view_by_jimv_system_config, #view_by_quota, #view_by_ip_pool, #view_by_vlan, #view_by_auxiliary, #view_by_token').css('display', 'none');

            if (sheet_tag.indexOf('#quota') != -1) {
                view_by_quota_label.parent().addClass('active');
                $('#view_by_quota').css('display', 'unset');

            } else if (sheet_tag.indexOf('#ip_pool') != -1) {
                view_by_ip_pool_label.parent().addClass('active');
                $('#view_by_ip_pool').css('display', 'unset');

            } else if (sheet_tag.indexOf('#vlan') != -1) {
                view_by_vlan_label.parent().addClass('active');
                $('#view_by_vlan').css('display', 'unset');

            } else if (sheet_tag.indexOf('#token') != -1) {
                view_by_token_label.parent().addClass('active');
                $('#view_by_token').css('display', 'unset');

            } else if (sheet_tag.indexOf('#auxiliary') != -1) {
                view_by_auxiliary_label.parent().addClass('active');
                $('#view_by_auxiliary').css('display', 'unset');

            } else {
                view_by_jimv_system_config_label.parent().addClass('active');
                $('#view_by_jimv_system_config').css('display', 'unset');
            }
        }

        $(function() { "use strict";
            $("#iops_base").TouchSpin({
                max: 10000,
                min: 0,
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#iops_pre_unit").TouchSpin({
                max: 100,
                min: 0,
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#iops_cap").TouchSpin({
                max: 100000,
                min: 0,
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#iops_max").TouchSpin({
                max: 200000,
                min: 0,
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#iops_max_length").TouchSpin({
                max: 600,
                min: 0,
                postfix: '秒',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_base").TouchSpin({
                max: 1024,
                min: 0,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_pre_unit").TouchSpin({
                max: 10,
                min: 0,
                step: 0.01,
                decimals: 2,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_cap").TouchSpin({
                max: 1024 * 2,
                min: 0,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_max").TouchSpin({
                max: 1024 * 10,
                min: 0,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_max_length").TouchSpin({
                max: 600,
                min: 0,
                postfix: '秒',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#vlan_id").TouchSpin({
                max: 4094,
                min: 1,
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        function register_iops_bps_event() {
            $('#iops').on('change', function () {
                $("#iops_rd").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_wr').val()});
                $("#iops_wr").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_rd').val()});
            });

            $('#iops_rd').on('change', function () {
                $("#iops_wr").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_rd').val()});
            });

            $('#iops_wr').on('change', function () {
                $("#iops_rd").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_wr').val()});
            });

            $('#bps').on('change', function () {
                $("#bps_rd").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_wr').val()});
                $("#bps_wr").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_rd').val()});
            });

            $('#bps_rd').on('change', function () {
                $("#bps_wr").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_rd').val()});
            });

            $('#bps_wr').on('change', function () {
                $("#bps_rd").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_wr').val()});
            });
        }

        function update_quota() {
            $.ajax({
                url : '/api/config/_quota',
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify({
                    iops_base: parseInt($('#iops_base').val()),
                    iops_pre_unit: parseInt($('#iops_pre_unit').val()),
                    iops_cap: parseInt($('#iops_cap').val()),
                    iops_max: parseInt($('#iops_max').val()),
                    iops_max_length: parseInt($('#iops_max_length').val()),
                    bps_base: parseInt($('#bps_base').val()) * 1024 * 1024,
                    bps_pre_unit: parseFloat($('#bps_pre_unit').val()) * 1024 * 1024,
                    bps_cap: parseInt($('#bps_cap').val()) * 1024 * 1024,
                    bps_max: parseInt($('#bps_max').val()) * 1024 * 1024,
                    bps_max_length: parseInt($('#bps_max_length').val()),
                    influence_current_guest: $('#influence_current_guest').prop('checked')
                }),
                error : function() {
                    alter_danger('性能配额更新失败！');
                },
                success : function() {
                    alter_success('性能配额更新成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function refresh_guest_state() {
            $.ajax({
                url : '/api/guests/_refresh_guest_state',
                type : 'PATCH',
                error : function() {
                    alter_danger('刷新虚拟机状态失败！');
                },
                success : function() {
                    alter_success('刷新虚拟机状态成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function sync_vlans() {
            $.ajax({
                url : '/api/vlans/_sync',
                type : 'PUT',
                error : function() {
                    alter_danger('同步 VLAN 状态失败！');
                },
                success : function() {
                    alter_success('同步 VLAN 状态成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function exchange_ip_pool_for_panel(ip_pool) {
            var activity_checked = '';
            if (ip_pool.activity > 0) {
                activity_checked = 'checked';
            }

            return '<div class="panel">\n' +
                '    <div class="panel-body">\n' +
                '        <form class="form-horizontal bordered-row" style="padding-left: 8%;">\n' +
                '            <input title="IP Pool ID" class="form-control" name="id" type="text" value="' + ip_pool.id + '" hidden>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">起始 IP</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="起始 IP" class="form-control" name="start_ip" type="text" value="' + ip_pool.start_ip + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">截止 IP</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="截止 IP" class="form-control" name="end_ip" type="text" value="' + ip_pool.end_ip + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">子网掩码</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="子网掩码" class="form-control" name="netmask" type="text" value="' + ip_pool.netmask + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">网关</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="网关" class="form-control" name="gateway" type="text" value="' + ip_pool.gateway + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">DNS1</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="DNS1" class="form-control" name="dns1" type="text" value="' + ip_pool.dns1 + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">DNS2</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="DNS2" class="form-control" name="dns2" type="text" value="' + ip_pool.dns2 + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">名称</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="名称" class="form-control" name="name" type="text" value="' + ip_pool.name + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">备注</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <textarea title="备注" class="form-control" name="description">'+ip_pool.description+'</textarea>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group" style="margin-bottom: 0;">\n' +
                '                <div class="col-sm-6">\n' +
                '                    <input type="checkbox" name="activity" data-on-color="info" class="input-switch" data-id="' + ip_pool.id + '" ' + activity_checked + ' data-size="medium" data-on-text="活跃" data-off-text="非活跃">\n' +
                '                </div>\n' +
                '                <div class="col-sm-6">\n' +
                '                    <div style="padding: 0; text-align: right;">\n' +
                '                        <button type="button" class="btn btn-sm btn-primary" style="right: 10%;" data-id="' + ip_pool.id + '" onclick="update_ip_pool(this);">更新</button>\n' +
                '                        <button type="button" class="btn btn-sm btn-danger" style="right: 4%;" data-toggle="modal" data-target="#ip_pool_delete_modal" onclick="$(\'#ip_pool_id\').val(get_ip_pool_field_value(this, \'id\'));\n' +
                '                                       $(\'#delete_instance_desc\').text(get_ip_pool_field_value(this, \'name\'))">删除</button>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </form>\n' +
                '    </div>\n' +
                '</div>';
        }

        function get_ip_pools_html() {
            var html = '<div class="row" style="padding: 10px 10px 10px 0; width: 100%;">\n' +
                '    <div class="col-sm-12" style="padding-right: 0;">\n' +
                '        <div class="pull-right">\n' +
                '            <button class="btn btn-default" onclick="window.location.reload();" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>\n' +
                '            <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#add_ip_pool_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加 IP 池</a>\n' +
                '            <a class="btn btn-black" href="javascript:;" data-toggle="modal" data-target="#reserved_ip_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px; color: white;">保留 IP</a>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '</div>';

            $.ajax({
                url : '/api/ip_pools',
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                async: false,
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    $.each(data.data, function(k, v) {
                        html += exchange_ip_pool_for_panel(v);
                    });
                }
            });
            return html
        }

        function refresh_ip_pools() {
            var html = get_ip_pools_html();
            $('#view_by_ip_pool').append(html);
        }

        function get_ip_pool_field_value(me, name) {
            return $(me).parent().parent().parent().parent().serializeArray().filter(
                function(field) {return field.name == name})[0].value;
        }

        function update_ip_pool(me) {
            var id = get_ip_pool_field_value(me, 'id');
            var start_ip = get_ip_pool_field_value(me, 'start_ip');
            var end_ip = get_ip_pool_field_value(me, 'end_ip');
            var netmask = get_ip_pool_field_value(me, 'netmask');
            var gateway = get_ip_pool_field_value(me, 'gateway');
            var dns1 = get_ip_pool_field_value(me, 'dns1');
            var dns2 = get_ip_pool_field_value(me, 'dns2');
            var name = get_ip_pool_field_value(me, 'name');
            var description = get_ip_pool_field_value(me, 'description');

            var data = {
                start_ip: start_ip,
                end_ip: end_ip,
                netmask: netmask,
                gateway: gateway,
                dns1: dns1,
                dns2: dns2,
                name: name,
                description: description
            };

            $.ajax({
                url : '/api/ip_pools/' + String(id),
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: "json",
                data : JSON.stringify(data),
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('更新 IP 池失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('更新 IP 池成功！');
                }
            });

            setTimeout(function() {
                window.location.reload();
            }, 3000);
        }

        function create_ip_pool(me) {
            $('#add_ip_pool_modal').modal('hide');

            var start_ip = get_ip_pool_field_value(me, 'start_ip');
            var end_ip = get_ip_pool_field_value(me, 'end_ip');
            var netmask = get_ip_pool_field_value(me, 'netmask');
            var gateway = get_ip_pool_field_value(me, 'gateway');
            var dns1 = get_ip_pool_field_value(me, 'dns1');
            var dns2 = get_ip_pool_field_value(me, 'dns2');
            var name = get_ip_pool_field_value(me, 'name');
            var description = get_ip_pool_field_value(me, 'description');
            var activity = $('#activity').prop('checked');

            var data = {
                start_ip: start_ip,
                end_ip: end_ip,
                netmask: netmask,
                gateway: gateway,
                dns1: dns1,
                dns2: dns2,
                name: name,
                description: description,
                activity: activity
            };

            $.ajax({
                url : '/api/ip_pool',
                type : 'POST',
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: "json",
                data : JSON.stringify(data),
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('添加 IP 池失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('您所提交的 IP 池已创建。页面将在3秒钟后自动跳转到 IP 池列表页面！');
                }
            });

            setTimeout(function() {
                window.location.reload();
            }, 3000);
        }
        
        function put_ip_pool_activity(id) {
            $.ajax({
                url : '/api/ip_pool/' + String(id),
                type : 'PUT',
                async: false,
                dataType: "json",
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('IP 池激活失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('IP 池激活成功！');
                }
            });

            setTimeout(function() {
                window.location.reload();
            }, 3000);
        }

        function ip_pool_delete_at(me) {
            var ip_pool_id = $('#ip_pool_id').val();
            ip_pool_remove(ip_pool_id);
            $('#ip_pool_delete_modal').modal('hide');
        }

        function ip_pool_remove(id) {
            $.ajax({
                url : '/api/ip_pools/' + id,
                type : 'DELETE',
                contentType: "application/json; charset=utf-8",
                error : function() {
                    alter_danger('IP 池删除指令发送失败！');
                },
                success : function() {
                    alter_success('IP 池删除指令发送成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function row_onmouseover(me) {
            $(me).find(".delete_reserved_ip_trigger").css('display','inline-flex');
        }

        function row_onmouseout(me) {
            $(me).find(".delete_reserved_ip_trigger").css('display','none');
        }

        function vlan_row_onmouseover(me) {
            $(me).find(".edit_vlan_label_trigger, .edit_vlan_description_trigger").css('display','inline-flex');
        }

        function vlan_row_onmouseout(me) {
            $(me).find(".edit_vlan_label_trigger, .edit_vlan_description_trigger").css('display','none');
        }

        function add_reserved_ip(ip) {
            $.ajax({
                url : '/api/reserved_ip',
                type : 'POST',
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: "json",
                data : JSON.stringify({ip: ip}),
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('添加保留 IP 失败！');
                },
                success : function(data, textStatus, xhr) {
                    var html = '<tr role="row" data-id="' + data['data']['id'] + '" class="odd" onmouseover="row_onmouseover(this);" onmouseout="row_onmouseout(this);">\n' +
                        '    <td class="text-center">\n' +
                        data['data']['ip'] +
                        '        <div style="display: inline;">\n' +
                        '            <a href="javascript:;" class="delete_reserved_ip_trigger" style="display: none; float: right;">\n' +
                        '                <span onclick="reserved_ip_delete(this);" class="glyph-icon icon-iconic-cancel" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; color: indianred;"></span>\n' +
                        '            </a>\n' +
                        '        </div>\n' +
                        '    </td>\n' +
                        '</tr>';
                    $('#reserved_ip_table tbody').append(html);
                    alter_success('添加保留 IP 成功！');
                }
            });
        }
        
        function reserved_ip_refresh() {
            $.ajax({
                url : '/api/reserved_ips',
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                async: false,
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    var html = NaN;
                    $('#reserved_ip_table tbody').empty();
                    $.each(data.data, function(k, v) {
                        html = '<tr role="row" data-id="' + v['id'] + '" class="odd" onmouseover="row_onmouseover(this);" onmouseout="row_onmouseout(this);">\n' +
                        '    <td class="text-center">\n' +
                        v['ip'] +
                        '        <div style="display: inline;">\n' +
                        '            <a href="javascript:;" class="delete_reserved_ip_trigger" style="display: none; float: right;">\n' +
                        '                <span onclick="reserved_ip_delete(this);" class="glyph-icon icon-iconic-cancel" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; color: indianred;"></span>\n' +
                        '            </a>\n' +
                        '        </div>\n' +
                        '    </td>\n' +
                        '</tr>';
                        $('#reserved_ip_table tbody').append(html);
                    });
                }
            });
        }

        function reserved_ip_delete(me) {
            var id = $(me).parent().parent().parent().parent().data('id');
            $.ajax({
                url : '/api/reserved_ips/' + id,
                type : 'DELETE',
                contentType: "application/json; charset=utf-8",
                async: false,
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('添加保留 IP 失败！');
                },
                success : function(data, textStatus, xhr) {
                    $('#reserved_ip_table tbody tr[data-id="' +id + '"]').remove()
                    alter_success('删除保留 IP 成功！');
                }
            });
        }

        function tokens_list_refresh() {
            $.ajax({
                url : '/api/tokens',
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                async: false,
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    var html = NaN;
                    $('#tokens_list_table tbody').empty();
                    $.each(data.data, function(k, v) {
                        var color = 'forestgreen';
                        var ttl = v['ttl'];

                        if (ttl < 1) {
                            ttl = '已过期';
                            color = 'indianred';
                        }

                        html = '<tr role="row" class="odd">\n' +
                            '    <td class="text-center">' + v['token'] + '</td>\n' +
                            '    <td class="text-center" style="color: ' + color + ';">' + ttl + '</td>\n' +
                            '    <td class="text-center">' + v['expire'] + '</td>\n' +
                            '</tr>';
                        $('#tokens_list_table tbody').append(html);
                    });
                }
            });
        }

        function add_token() {
            $.ajax({
                url : '/api/token',
                type : 'POST',
                contentType: "application/json; charset=utf-8",
                async: false,
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('添加 Token 失败！');
                },
                success : function(data, textStatus, xhr) {
                    tokens_list_refresh();
                    alter_success('添加 Token 成功！');
                }
            });
        }

        function exchange_arrival_rate_for_tr(arrival, posts) {
            if (arrival === posts) {
                return '<span style="color: #00BB00;">' + '100%' + '</span>';
            } else {
                return '<span style="color: #BB0000;">' + arrival + '/' + posts + '</span>';
            }
        }

        function add_vlan() {
            $('#add_vlan_modal').modal('hide');

            $.ajax({
                url : '/api/vlan',
                type : 'POST',
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: "json",
                data : JSON.stringify({
                    label: $('#vlan_label').val(),
                    vlan_id: parseInt($('#vlan_id').val()),
                    description: $('#vlan_description').val()
                }),
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('添加 VLAN 失败！');
                },
                success : function(data, textStatus, xhr) {
                    var html = '<tr role="row" data-id="' + data['data']['id'] + '" class="odd" onmouseover="row_onmouseover(this);" onmouseout="row_onmouseout(this);">\n' +
                        '    <td>\n' +
                        '       <div>\n' +
                        '           <p style="display: inline-block;">' + data['data']['label'] + '</p>\n' +
                        '               <a href="javascript:;" class="edit_vlan_label_trigger" data-toggle="modal" data-target="#edit_vlan_label_modal" style="display: none; float: right;" onclick="$(\'#vlan_index_id\').val($(this).parent().parent().parent().data(\'id\'));$(\'#edit_vlan_label\').val($(this).prev().text())">\n' +
                        '                   <span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>\n' +
                        '               </a>\n' +
                        '       </div>\n' +
                        '    </td>\n' +
                        '    <td class="text-center">' + data['data']['vlan_id'] + '</td>\n' +
                        '    <td>' +
                        '       <div>\n' +
                        '           <p style="display: inline-block;">' + data['data']['description'] + '</p>\n' +
                        '               <a href="javascript:;" class="edit_vlan_description_trigger" data-toggle="modal" data-target="#edit_vlan_description_modal" style="display: none; float: right;" onclick="$(\'#vlan_index_id\').val($(this).parent().parent().parent().data(\'id\'));$(\'#edit_vlan_description\').val($(this).prev().text())">\n' +
                        '                   <span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>\n' +
                        '               </a>\n' +
                        '       </div>\n' +
                        '    <td class="text-center"><span style="color: #009cc5;">' + '创建中...' + '</span></td>\n' +
                        '    <td class="text-center">' + new Date(data['data']['create_time'] / 1000).format('yy-mm-dd HH:MM:ss') + '</td>\n' +
                        '    <td class="text-center">-</td>\n' +
                        '</tr>';
                    $('#vlans_list_table tbody').append(html);
                    alter_success('添加 VLAN 成功！');
                    setTimeout(function() {
                        refresh();
                    }, 3000);
                }
            });
        }

        function vlans_list_refresh() {
            $.ajax({
                url : '/api/vlans',
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                async: false,
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    var html = NaN;
                    var disabled = '';

                    $('#vlans_list_table tbody').empty();
                    $.each(data.data, function(k, v) {
                        if (v['vlan_id'] === -1) {
                            disabled = ' disabled';
                        } else {
                            disabled = '';
                        }

                        html = '<tr role="row" data-id="' + v['id'] + '" class="odd' + disabled + '" onmouseover="vlan_row_onmouseover(this);" onmouseout="vlan_row_onmouseout(this);">\n' +
                            '    <td>\n' +
                            '       <div>\n' +
                            '           <p style="display: inline-block;">' + v['label'] + '</p>\n' +
                            '               <a href="javascript:;" class="edit_vlan_label_trigger" data-toggle="modal" data-target="#edit_vlan_label_modal" style="display: none; float: right;" onclick="$(\'#vlan_index_id\').val($(this).parent().parent().parent().data(\'id\'));$(\'#edit_vlan_label\').val($(this).prev().text())">\n' +
                            '                   <span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>\n' +
                            '               </a>\n' +
                            '       </div>\n' +
                            '    </td>\n' +
                            '    <td class="text-center">' + v['vlan_id'] + '</td>\n' +
                            '    <td>' +
                            '       <div>\n' +
                            '           <p style="display: inline-block;">' + v['description'] + '</p>\n' +
                            '               <a href="javascript:;" class="edit_vlan_description_trigger" data-toggle="modal" data-target="#edit_vlan_description_modal" style="display: none; float: right;" onclick="$(\'#vlan_index_id\').val($(this).parent().parent().parent().data(\'id\'));$(\'#edit_vlan_description\').val($(this).prev().text())">\n' +
                            '                   <span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>\n' +
                            '               </a>\n' +
                            '       </div>\n' +
                            '    </td>\n' +
                            '    <td class="text-center">' + exchange_arrival_rate_for_tr(v['arrival'], v['posts']) + '</td>\n' +
                            '    <td class="text-center">' + new Date(v['create_time'] / 1000).format('yy-mm-dd HH:MM:ss') + '</td>\n' +
                            '    <td class="text-center">\n' +
                            '        <div class="dropdown inline-block">\n' +
                            '            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">更多</a>\n' +
                            '            <ul class="dropdown-menu">\n' +
                            '                <li>\n' +
                            '                    <a href="javascript:;" style="color: indianred;" data-toggle="modal" data-target="#vlan_delete_modal"\n'+
                            '                       onclick="$(\'#vlan_index_id\').val($(this).parent().parent().parent().parent().parent().data(\'id\'));' +
                            '                       $(\'#delete_vlan_instance_desc\').text(\'VLAN ID: \' + $(this).parent().parent().parent().parent().parent().children()[1].textContent + \' / \' + $(this).parent().parent().parent().parent().parent().children()[0].textContent)">\n'+
                            '                        删除\n'+
                            '                    </a>\n'+
                            '                </li>\n' +
                            '                <li>\n' +
                            '                    <a href="javascript:;" style="color: indianred;" data-toggle="modal" data-target="#vlan_force_delete_modal"\n'+
                            '                       onclick="$(\'#vlan_index_id\').val($(this).parent().parent().parent().parent().parent().data(\'id\'));' +
                            '                       $(\'#force_delete_vlan_instance_desc\').text(\'VLAN ID: \' + $(this).parent().parent().parent().parent().parent().children()[1].textContent + \' / \' + $(this).parent().parent().parent().parent().parent().children()[0].textContent)">\n'+
                            '                        强制删除\n'+
                            '                    </a>\n'+
                            '                </li>\n' +
                            '            </ul>\n' +
                            '        </div>\n' +
                            '    </td>\n' +
                            '</tr>';
                        $('#vlans_list_table tbody').append(html);
                    });
                }
            });
        }

        function vlan_label_update(me) {
            var vlan_index_id = $('#vlan_index_id').val();
            var label = $('#edit_vlan_label').val();
            $('#edit_vlan_label_modal').modal('hide');
            $.ajax({
                url : '/api/vlans/' + vlan_index_id,
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify({
                    label: label
                }),
                error : function() {
                    alter_danger('VLAN 名称更新失败！');
                },
                success : function() {
                    alter_success('VLAN 名称更新成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function vlan_description_update(me) {
            var vlan_index_id = $('#vlan_index_id').val();
            var description = $('#edit_vlan_description').val();
            $('#edit_vlan_description_modal').modal('hide');
            $.ajax({
                url : '/api/vlans/' + vlan_index_id,
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify({
                    description: description
                }),
                error : function() {
                    alter_danger('VLAN 备注更新失败！');
                },
                success : function() {
                    alter_success('VLAN 备注更新成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function vlan_delete_at() {
            $('#vlan_delete_modal').modal('hide');

            var vlan_index_id = $('#vlan_index_id').val();

            $.ajax({
                url : '/api/vlans/' + vlan_index_id,
                type : 'DELETE',
                contentType: "application/json; charset=utf-8",
                async: false,
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('删除 VLAN 失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('删除 VLAN 成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function vlan_force_delete_at() {
            $('#vlan_force_delete_modal').modal('hide');

            var vlan_index_id = $('#vlan_index_id').val();

            $.ajax({
                url : '/api/vlans/_force/' + vlan_index_id,
                type : 'DELETE',
                contentType: "application/json; charset=utf-8",
                async: false,
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('强制删除 VLAN 失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('强制删除 VLAN 成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }
    </script>
    <div class="panel">
        <div class="panel-body">
            <ul class="nav nav-tabs mrg25B">
                <li class="active"><a href="javascript:;" onclick="select_this(this);" id="view_by_jimv_system_config_label">JimV 系统配置</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="view_by_ip_pool_label">IP 池</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="view_by_vlan_label">VLAN</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="view_by_quota_label">性能配额</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="view_by_token_label">Token</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="view_by_auxiliary_label">辅助</a></li>
            </ul>
            <div id="view_by_jimv_system_config" class="example-box-wrapper">
                <form class="form-horizontal bordered-row" style="padding-left: 8%;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">网桥(业务网络)</label>
                        <div class="col-sm-3">
                            <input title="Guest 业务网络" class="form-control" name="vm_network" type="text" disabled value="{{ config.vm_network }}">
                        </div>
                        <label class="col-sm-2 control-label">网桥(管理网络)</label>
                        <div class="col-sm-3">
                            <input title="Guest 管理网络" class="form-control" name="vm_manage_network" type="text" disabled value="{{ config.vm_manage_network }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">虚拟机磁盘存储模式</label>
                        <div class="col-sm-3">
                            <select id="storage_mode" title="虚拟机磁盘存储模式" class="selectpicker" name="storage_mode" data-width="100%" disabled>
                                <option {% if config.storage_mode == 0 %}selected{% endif %} value="0">本地存储</option>
                                <option {% if config.storage_mode == 1 %}selected{% endif %} value="1" data-subtext="NFS">挂载共享</option>
                                <option {% if config.storage_mode == 2 %}selected{% endif %} value="2">Ceph</option>
                                <option {% if config.storage_mode == 3 %}selected{% endif %} value="3">GlusterFS</option>
                            </select>
                        </div>
                        <label id="dfs_volume_label" class="col-sm-2 control-label" style="display: {% if config.storage_mode in [3] %}unset{% else %}none{% endif %};">分布式文件系统存储卷</label>
                        <div class="col-sm-3">
                            <input id="dfs_volume" title="分布式文件系统存储卷" class="form-control" name="dfs_volume" type="text" style="display: {% if config.storage_mode in [3] %}unset{% else %}none{% endif %};" disabled value="{{ config.dfs_volume }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">虚拟机磁盘存放路径</label>
                        <div class="col-sm-3">
                            <input title="虚拟机磁盘存放路径" class="form-control" name="storage_path" type="text" disabled value="{{ config.storage_path }}">
                        </div>
                    </div>
                </form>
            </div>
            <div id="view_by_quota" class="example-box-wrapper" style="display: none;">
                <form class="form-horizontal bordered-row" style="padding-left: 8%;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            &nbsp;&nbsp;IOPS 基准值
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_base" title="IOPS 基准值" class="form-control" type="text" value="{{ config.iops_base }}" name="iops_base">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS 基准值</label>
                        <div class="col-sm-3">
                            <input id="bps_base" title="BPS 基准值" class="form-control" type="text" value="{{ (config.bps_base / 1024 / 1024) | int }}" name="bps_base">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            &nbsp;&nbsp;IOPS/GiB 增益
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_pre_unit" title="IOPS/GiB 增益" class="form-control" type="text" value="{{ config.iops_pre_unit }}" name="iops_pre_unit">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS/GiB 增益</label>
                        <div class="col-sm-3">
                            <input id="bps_pre_unit" title="BPS/GiB 增益 (MiB)" class="form-control" type="text" value="{{ '%0.2f'|format(config.bps_pre_unit / 1024 / 1024) }}" name="bps_pre_unit">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            &nbsp;&nbsp;IOPS 增益上限
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_cap" title="IOPS 增益上限" class="form-control" type="text" value="{{ config.iops_cap }}" name="iops_cap">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS 增益上限</label>
                        <div class="col-sm-3">
                            <input id="bps_cap" title="BPS 增益上限 (MiB)" class="form-control" type="text" value="{{ (config.bps_cap / 1024 / 1024) | int }}" name="bps_cap">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            <span class="glyph-icon icon-bitbucket" style="margin-left: -4px;"></span>
                            &nbsp;&nbsp;IOPS 桶宽
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_max" title="IOPS 桶宽" class="form-control" type="text" value="{{ config.iops_max }}" name="iops_max">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span><span class="glyph-icon icon-bitbucket"></span>&nbsp;&nbsp;BPS 桶宽</label>
                        <div class="col-sm-3">
                            <input id="bps_max" title="BPS 桶宽 (MiB)" class="form-control" type="text" value="{{ (config.bps_max / 1024 / 1024) | int }}" name="bps_max">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            <span class="glyph-icon icon-bitbucket" style="margin-left: -4px;"></span>
                            &nbsp;&nbsp;IOPS 桶高
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_max_length" title="IOPS 桶高 (秒)" class="form-control" type="text" value="{{ config.iops_max_length }}" name="iops_max_length">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span><span class="glyph-icon icon-bitbucket"></span>&nbsp;&nbsp;BPS 桶高</label>
                        <div class="col-sm-3">
                            <input id="bps_max_length" title="BPS 桶高 (秒)" class="form-control" type="text" value="{{ config.bps_max_length }}" name="bps_max_length">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="col-sm-6">
                            <label>
                                <input id="influence_current_guest" type="checkbox" name="influence_current_guest">
                                同时更新已存在的实例
                            </label>
                        </div>
                        <div class="col-sm-6">
                            <div style="padding: 0; text-align: right;">
                                <button type="button" class="btn btn-sm btn-primary" style="right: 10%;" onclick="update_quota();">更新</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="view_by_ip_pool" class="example-box-wrapper" style="display: none;">
            </div>
            <div id="view_by_vlan" class="example-box-wrapper" style="display: none;">
                <div class="row" style="padding: 10px 10px 10px 0; width: 100%;">
                    <div class="col-sm-12" style="padding-right: 0;">
                        <div class="pull-right">
                            <button class="btn btn-default" onclick="window.location.reload();" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
                            <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#add_vlan_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加 VLAN</a>
                        </div>
                    </div>
                </div>
                <table id="vlans_list_table" class="table table-bordered table-hover" cellspacing="0" width="100%" role="grid" style="width: 100%; margin-bottom: 0;">
                    <thead>
                    <tr role="row">
                        <th width="180px">名称</th>
                        <th class="text-center" width="120px">VLAN ID</th>
                        <th>描述</th>
                        <th class="text-center" width="100px">完整度</th>
                        <th class="text-center" width="160px">创建时间</th>
                        <th class="text-center" width="100px">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div id="view_by_token" class="example-box-wrapper" style="display: none;">
                <div class="row" style="padding: 10px 10px 10px 0; width: 100%;">
                    <div class="col-sm-12" style="padding-right: 0;">
                        <div class="pull-right">
                            <button class="btn btn-default" onclick="window.location.reload();" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
                            <a class="btn btn-info" href="javascript:;" onclick="add_token();" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加 Token</a>
                        </div>
                    </div>
                </div>
                <table id="tokens_list_table" class="table table-bordered table-hover" cellspacing="0" width="100%" role="grid" style="width: 100%;">
                    <thead>
                    <tr role="row">
                        <th class="text-center">Token</th>
                        <th class="text-center">TTL</th>
                        <th class="text-center">逾期时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div id="view_by_auxiliary" class="example-box-wrapper" style="display: none;">
                <form class="form-horizontal bordered-row" style="padding-left: 8%;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-primary" onclick="refresh_guest_state();">刷新虚拟机状态</button>
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-primary" onclick="sync_vlans();">同步计算节点 VLAN</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<input id="ip_pool_id" title="IP Pool ID" name="ip_pool_id" hidden>
<input id="vlan_index_id" title="VLAN Index ID" name="vlan_index_id" hidden>

<div class="modal" id="add_ip_pool_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加 IP 池：</h4>
            </div>
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal bordered-row" style="padding-left: 16%;">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">起始 IP</label>
                            <div class="col-sm-3">
                                <input title="起始 IP" class="form-control" name="start_ip" type="text">
                            </div>
                            <label class="col-sm-2 control-label">截止 IP</label>
                            <div class="col-sm-3">
                                <input title="截止 IP" class="form-control" name="end_ip" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">子网掩码</label>
                            <div class="col-sm-3">
                                <input title="子网掩码" class="form-control" name="netmask" type="text">
                            </div>
                            <label class="col-sm-2 control-label">网关</label>
                            <div class="col-sm-3">
                                <input title="网关" class="form-control" name="gateway" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DNS1</label>
                            <div class="col-sm-3">
                                <input title="DNS1" class="form-control" name="dns1" type="text">
                            </div>
                            <label class="col-sm-2 control-label">DNS2</label>
                            <div class="col-sm-3">
                                <input title="DNS2" class="form-control" name="dns2" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-3">
                                <input title="名称" class="form-control" name="name" type="text">
                            </div>
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-3">
                                <textarea title="备注" class="form-control" name="description"></textarea>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <div class="col-sm-6">
                                <div class="checkbox checkbox-info">
                                    <label>
                                        <input id="activity" name="activity" type="checkbox" checked class="custom-checkbox">
                                        设为默认
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div style="padding: 0; text-align: right;">
                                    <button type="button" class="btn btn-sm btn-primary" style="right: 20%;" onclick="create_ip_pool(this);">创建</button>
                                    <button type="button" class="btn btn-sm btn-default" style="right: 10%;" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="ip_pool_delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除 IP 池：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要删除该 IP 池吗？</p>
                <h3 style="color: orangered;" id="delete_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="ip_pool_delete_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="reserved_ip_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">保留 IP：</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding-top: 0; padding-bottom: 0;">
                <div class="example-box-wrapper">
                    <form id="reserved_ip_form" class="form-horizontal bordered-row" action="javascript:;">
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <div class="col-sm-10" style="height: 300px; overflow: auto;">
                                <table id="reserved_ip_table" class="table table-bordered table-hover" cellspacing="0" width="100%" role="grid"
                                       style="width: 100%; margin-bottom: 0;">
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <div class="col-sm-10">
                                <input id="reserved_ip_input" class="form-control" style="text-align: center;" type="text" placeholder="将要保留的 IP">
                            </div>
                            <div class="col-sm-1"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="add_vlan_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加 VLAN：</h4>
            </div>
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal bordered-row" style="padding-left: 16%;">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="padding-right: 0;">名称</label>
                            <div class="col-sm-8">
                                <input title="VLAN 名称" class="form-control" id="vlan_label" name="vlan_label" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="padding-right: 0;">VLAN ID</label>
                            <div class="col-sm-8">
                                <input title="VLAN ID" class="form-control" id="vlan_id" name="vlan_id" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" style="padding-right: 0;">备注</label>
                            <div class="col-sm-8">
                                <textarea title="备注" class="form-control" id="vlan_description" name="vlan_description"></textarea>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <div class="col-sm-6">
                            </div>
                            <div class="col-sm-6">
                                <div style="padding: 0; text-align: right;">
                                    <button type="button" class="btn btn-sm btn-primary" style="right: 20%;" onclick="add_vlan(this);">创建</button>
                                    <button type="button" class="btn btn-sm btn-default" style="right: 10%;" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="edit_vlan_label_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑 VLAN 名称：</h4>
            </div>
            <div class="modal-body">
                <input id="edit_vlan_label" title="VLAN 名称" class="form-control" name="vlan_label">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="vlan_label_update();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="edit_vlan_description_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑 VLAN 备注：</h4>
            </div>
            <div class="modal-body">
                <textarea id="edit_vlan_description" rows="6" title="VLAN 备注" class="form-control" name="vlan_description"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="vlan_description_update();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="vlan_delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除 VLAN：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要删除该 VLAN 吗？</p>
                <h3 style="color: orangered;" id="delete_vlan_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="vlan_delete_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="vlan_force_delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">强制删除 VLAN：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要强制删除该 VLAN 吗？</p>
                <h3 style="color: orangered;" id="force_delete_vlan_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="vlan_force_delete_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}