{% extends 'index.html' %}
{% load staticfiles %}
{% load tags %}
{% load i18n %}

{% block head_link %}

{% endblock head_link %}

{% block header %}
    <li><a href=""><i class="fa fa-hdd-o"></i>{% trans "接入点" %}</a></li>
    <li class="active"><i class="fa fa-hdd-o"></i>{% trans "群组" %}</li>
{% endblock header %}
{% block row %}
    <div>
        <button id="position-4-success" hidden="hidden" data-a = "{{error.error_msg}}">1</button>
        <button id="position-4-error" hidden="hidden" data-a = "{{error.error_msg}}">2</button>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="panel bk-bg-white">
                <div class="panel-heading">
                    <h6><i class="fa fa-hdd-o"></i>{% trans "群组" %}</h6>
                    <p class="penel-heading-inlink-block penel-heading-right" >
                        {% if request.user.administrator_permission == 2 or request.user.administrator_permission == 3 or request.user.administrator_permission == 5 or request.user.administrator_permission == 6 or request.user.administrator_permission == 0%}
                            <button class="btn btn-default penel-heading-button btn-add" style="padding-left:0 !important;" onclick="open_form();device_add_ajax();"><i class="fa fa-plus"></i>{% trans "添加" %}</button>
                        {% endif %}

                    </p>
                    <div class="panel-actions">
                        <a href="#" class="btn-minimize"><i class="fa fa-caret-up"></i></a>
                        <!--<a href="#" class="btn-close"><i class="fa fa-times"></i></a>-->
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered " id="datatable-default-2">
                        <thead>
                            <tr>
                                <th>{% trans "群组名称" %}</th>
                                <th>{% trans "管理域名" %}</th>
                                <th>{% trans "设备数量" %}</th>
                                <th>{% trans "无线网络" %}</th>
                                <th>{% trans "操作" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for gp in group %}
                                <tr class="gradeA">
                                    <td> {{gp.group_name}} </td>
                                    <td> {{gp.account_group_name}} </td>
                                    <td> {{gp.online_dev_count}}/{{gp.device_count}} </td>
                                    <td>{{gp.wlan_count}}</td>
                                    <td class="table-botton-pad">
                                        <a class="btn btn-default btn-view table-btn-btnpad" onclick="open_form1('{{gp.group_name}}','{{gp.account_group_name}}','{{request.user.administrator_permission}}','{{gp.pk}}');add_device_ajax('{{gp.pk}}');remove_device_ajax('{{gp.pk}}');add_wlan_ajax('{{gp.pk}}');ap_setting_ajax('{{gp.pk}}');">
                                            {% trans "查看" %}
                                        </a>
                                        {% if gp.group_name == "DefaultGroup" and gp.account_group_name == "admin" %}

                                        {% else %}
                                            {% if gp.group_name == gp.account_group_name  %}

                                            {% else %}
                                                {% if request.user.administrator_permission == 0 or request.user.administrator_permission == 6 or request.user.administrator_permission == 5 or request.user.administrator_permission == 3 or request.user.administrator_permission == 2 %}
                                                   <!-- <a class="btn btn-delete table-btn-btnpad" href="{% url 'ap_group_del' %}?group_id={{gp.pk}}">-->
                                                    <a class="btn btn-delete table-btn-btnpad" onclick="open_form2('{{gp.pk}}');">
                                                        {% trans "删除" %}
                                                    </a>
                                                {% endif %}
                                            {% endif %}
                                        {% endif %}

                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <a class=" modal-with-form " href="#modalForm" id="open_form" hidden="True">Open Form</a>
        <!-- Modal Form -->
        <div id="modalForm" class="modal-block modal-block-primary mfp-hide config-window-width ">
            <div class="panel panel-default" >
                <div class="panel-heading">
                    <h2 class="panel-title"><span >{% trans "添加群组" %}</span> <a href="#" class=" modal-dismiss close-icon-right "><span class="fa fa-times tab-icon-color"></span></a></h2>
                </div>

                <div class="panel-body bk-noradius" >
                    <div class="form-group" >
                        <div class="col-md-12" style="padding-left:0px; margin-bottom:10px;">
                            <div class="col-md-3 penel-body-title-font" style="padding-left:0px;">
                                <span>{% trans "群组名称" %}:</span>
                            </div>
                            <div class="col-md-6" style="padding-left:0px;">
                                <input type="text" class="form-control" id="add_group_name">
                            </div>
                            <div class="col-md-3">

                            </div>

                        </div>
                    </div>


                    <ul class="nav nav-tabs drag">
                        <li class="active">
                            <a href="#add_group" data-toggle="tab" ><span class="fa fa-plus tab-icon-color"></span> {% trans "加入群组" %}</a>
                        </li>
                    </ul>
                    <div class="tab-content drag">
                        <div id="add_group" class="tab-pane active">
                            <table class="table table-bordered " id="datatable-default-3">
                                <thead>
                                    <tr>
                                        <th>{% trans "名称/MAC地址" %}</th>
                                        <th>{% trans "MAC地址" %}</th>
                                        <th>{% trans "加入" %}</th>
                                    </tr>
                                </thead>
                                <tbody id="device_add_table">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            {% if request.user.administrator_permission == 0 or request.user.administrator_permission == 6 or request.user.administrator_permission == 5 or request.user.administrator_permission == 3 or request.user.administrator_permission == 2 %}
                            <button class="btn btn-default " onclick="create_group();">{% trans "应用" %}</button>
                            {% endif %}
                            <button class="btn btn-default modal-dismiss">{% trans "取消" %}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <a class=" modal-with-form " href="#modalForm2" id="open_form2" hidden="True">Open Form2</a>
        <div id="modalForm2" class="modal-block modal-block-primary mfp-hide config-window-width ">
            <div class="panel panel-default" >
                <div class="panel-heading">
                    <h2 class="panel-title"><span >{% trans "删除组" %}</span> <a href="#" class=" modal-dismiss close-icon-right "><span class="fa fa-times tab-icon-color"></span></a></h2>
                </div>
                <div class="panel-body bk-noradius" >
                    <h2 class="panel-title"><span >{% trans "一旦删除，数据将被清空，请谨慎操作!!!" %}</span></h2>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            {% if request.user.administrator_permission == 0 or request.user.administrator_permission == 6 or request.user.administrator_permission == 5 or request.user.administrator_permission == 3 or request.user.administrator_permission == 2 %}
                            <input type=text id="pk" hidden="True">
                            <button class="btn btn-default " onclick="delete_group();">{% trans "应用" %}</button>
                            {% endif %}
                            <button class="btn btn-default modal-dismiss">{% trans "取消" %}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <a class=" modal-with-form " href="#modalForm1" id="open_form1" hidden="True">Open Form1</a>
        <!-- Modal Form -->
        <div id="modalForm1" class="modal-block modal-block-primary mfp-hide config-window-width ">
            <div class="panel panel-default" >
                <div class="panel-heading">
                    <h2 class="panel-title"><span >{% trans "查看群组" %}</span> <a href="#" class=" modal-dismiss close-icon-right "><span class="fa fa-times tab-icon-color"></span></a></h2>
                </div>

                <div class="panel-body bk-noradius" >
                    <div class="form-group" >
                        <div class="col-md-12" style="padding-left:0px; margin-bottom:10px;">
                            <div class="col-md-3 penel-body-title-font" style="padding-left:0px;">
                                <span>{% trans "群组名称" %}:</span>
                            </div>
                            <div class="col-md-6" style="padding-left:0px;">
                                <input type="text" class="form-control" id="fix_group_name">
                            </div>
                            <div class="col-md-3">

                            </div>

                        </div>
                    </div>


                    <ul class="nav nav-tabs drag" id="d-1">
                        <li class="active">
                            <a href="#remove_device" data-toggle="tab" ><span class="fa fa-minus tab-icon-color" id="remove_device_href"></span> {% trans "移出群组" %}</a>
                        </li>
                        <li >
                            <a href="#add_device" data-toggle="tab" ><span class="fa fa-plus tab-icon-color"></span> {% trans "加入群组" %}</a>
                        </li>
                        <li>
                            <a href="#audit_fix" data-toggle="tab" ><span class="fa fa-cog tab-icon-color"></span> {% trans "无线网络" %}</a>
                        </li>
                        {% if oemlimit.oem_type == "sugpon" %}
                        <li>
                            <a href="#gpon_fix" data-toggle="tab" ><span class="fa fa-server tab-icon-color"></span> GPON</a>
                        </li>
                        {% endif %}
                    </ul>
                    <ul class="nav nav-tabs drag" id="d-2" hidden="hidden">
                        <li class="active">
                            <a href="#remove_device" data-toggle="tab" ><span class="fa fa-minus tab-icon-color"></span> {% trans "群组成员" %}</a>
                        </li>
                        <li>
                            <a href="#audit_fix" data-toggle="tab" ><span class="fa fa-cog tab-icon-color"></span> {% trans "无线网络" %}</a>
                        </li>
                        {% if oemlimit.oem_type == "sugpon" %}
                        <li>
                            <a href="#gpon_fix" data-toggle="tab" ><span class="fa fa-server tab-icon-color"></span> GPON</a>
                        </li>
                        {% endif %}
                    </ul>
                    <div class="tab-content drag">
                        <div id="remove_device" class="tab-pane active">
                            <table class="table table-bordered " id="datatable-default-remove_device">
                                <thead>
                                    <tr>
                                        <th>{% trans "名称/MAC地址" %}</th>
                                        <th>{% trans "MAC地址" %}</th>
                                        <th>{% trans "移出" %}</th>
                                    </tr>
                                </thead>
                                <tbody id="remove_device_table">

                                </tbody>
                            </table>
                        </div>
                        <div id="add_device" class="tab-pane">
                            <table class="table table-bordered " id="datatable-default-add_device">
                                <thead>
                                    <tr>
                                        <th>{% trans "名称/MAC地址" %}</th>
                                        <th>{% trans "MAC地址" %}</th>
                                        <th>{% trans "加入" %}</th>
                                    </tr>
                                </thead>
                                <tbody id="add_device_table">

                                </tbody>
                            </table>
                        </div>
                        <div id="audit_fix" class="tab-pane">
                            <table class="table table-bordered " id="datatable-default-add_wlan">
                                <thead>
                                    <tr>
                                        <th>{% trans "无线网络" %}</th>
                                        <th>{% trans "安全类型" %}</th>
                                        <th>{% trans "来宾策略" %}</th>
                                        <th>{% trans "应用" %}</th>
                                    </tr>
                                </thead>
                                <tbody id="add_wlan_table">

                                </tbody>
                            </table>
                        </div>
                        {% if oemlimit.oem_type == "sugpon" %}
                        <div id="gpon_fix" class="tab-pane" >
                            <div class="panel-group " id="accordion-gpon">
                                <div class="panel panel-accordion" id="gpon_config_list">
                                    <div class="panel-heading bk-fg-primary">
                                        <h4 class="panel-title">
                                            <a class="accordion-toggle toggle-a-color" data-toggle="collapse" data-parent="#accordion-gpon" href="#collapse-gpon-config">
                                                {% trans "配置" %}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse-gpon-config" class="accordion-body collapse in" data-gp = "">
                                        <div class="panel-body penel-body-title-font">
                                            <div class="gpon-flex-config-box" style="margin-left:3%;">
                                                <div class="gpon-flex-config">
                                                    <span class="penel-body-div-marign-bottom" style="width:50%;">{% trans "升级地址" %}</span>
                                                    <input type="text" class="penel-body-div-marign-bottom" style="width:40%;" id="gpon_update_link" maxlength=63>
                                                </div>
                                                <div class="gpon-flex-config">
                                                    <span class="penel-body-div-marign-bottom" style="width:50%;">{% trans "升级文件" %}</span>
                                                    <input type="text" class="penel-body-div-marign-bottom" style="width:40%;" id="gpon_update_file" maxlength=63>
                                                </div>
                                                <div class="gpon-flex-config" id="save_update_button">
                                                    <span class="penel-body-div-marign-bottom" style="width:50%;">{% trans "保存配置" %}</span>
                                                    <button type="button" class="penel-body-div-marign-bottom penel-body-title-font" style="width:15%;" id="gpon_update_button">{% trans "保存" %}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            {% if request.user.administrator_permission == 0 or request.user.administrator_permission == 6 or request.user.administrator_permission == 5 or request.user.administrator_permission == 3 or request.user.administrator_permission == 2 %}
                            <button class="btn btn-default " onclick="modify_device_group();" >{% trans "应用" %}</button>
                            {% endif %}
                            <button class="btn btn-default modal-dismiss">{% trans "取消" %}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock row %}
{% block foot_js %}
<script>
  $(document).ready(function(){
    pageWords = {
      // allDeviceListPageSharedJS trans
      // serialNumAlertInfo:'{% trans "序列号不能为空" %}',
      // macAlertInfo:'{% trans "MAC 不能为空" %}',
      // macLenghtErrorAlertInfo:'{% trans "MAC 有效字符不为12" %}',
      // errorListDownload:'{% trans "错误列表下载" %}',
      // fileTypeError:'{% trans "文件类型错误" %}',
      // fileNotFound:'{% trans "未选择文件" %}',
      // every
      // acAddressErrorInfo:'{% trans "AC地址不合法" %}',
      // table trans
      processing:'{% trans "处理中..." %}',
      show:'{% trans "显示" %}',
      record:'{% trans "记录" %}',
      sZeroRecords:'{% trans "没有匹配结果" %}',
      sInfo:'{% trans "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项" %}',
      sInfoEmpty:'{% trans "显示第 0 至 0 项结果，共 0 项" %}',
      sInfoFiltered:'({% trans "由 _MAX_ 项结果过滤" %})',
      sSearch:'{% trans "搜索 : " %}',
      sEmptyTable:'{% trans "表中数据为空" %}',
      sLoadingRecords:'{% trans "载入中..." %}',
      // shared
      // online:'{% trans "在线" %}',
      // timeOut:'{% trans "超时" %}',
      // offline:'{% trans "离线" %}',
      // retired:'{% trans "退服" %}',
      // removed:'{% trans "已移除" %}',
      // reboot:'{% trans "重启" %}',
      // update:'{% trans "升级" %}',
      // privateip:'{% trans "私网地址" %}',
      // vpnip:'{% trans "远程地址" %}',
      // remove:'{% trans "移除" %}',
      // jump:'{% trans "跳转至" %}',
      promptInfo:'{% trans "提示信息" %}',
      // fix:'{% trans "修改" %}',

      // ssidEmptyError:'{% trans "信号名称不能为空" %}',
      // speedLimitEmptyError:'{% trans "限速不能为空" %}',
      // vlanEmptyError:'{% trans "vlan不能为空" %}',
      // vlanValueError:'{% trans "vlan必须是1-4094范围内的整数" %}',
      // passwdEmptyError:'{% trans "密码不能为空" %}',
      // passwdValueError:'{% trans "密码必须是8-64位的ASCII码字符" %}',

      // gpon
      serverIPEmptyError:'{% trans "服务器地址不能为空" %}',
      gponFileNameError:'{% trans "文件名称不能为空" %}',

      nameEmptyError:'{% trans "别名不能为空" %}',
      userNotFoundError:'{% trans "用户不存在" %}',

      open:'{% trans "开启" %}',
      close:'{% trans "关闭" %}',
      pleaseInputGroupName:'{% trans "请输入群组名称" %}',
    };
  });
</script>
<script src="{% static 'main/app-js/apGroupPage.js' %}"></script>

<script>
  //一定要放在最下面
  $(function(){

    var error = JSON.parse('{{error_json|safe}}');

    if(error.error_type === "failed"){
        $("#position-4-error").click();
    };
    if(error.error_type === "success"){
        $('#position-4-success').click();
    }
  });
</script>
{% endblock foot_js %}