<div class="page-content" >
  <div class="row">


    <div class="col-xs-12" style="height:390px">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="center"><input type="checkbox" class="ace par"><span class="lbl"></span></th>
            <th data-i18n="template.groupName"></th>
          </tr>
        </thead>
        <tbody id="table">
          <!-- <td align="center" colspan="10" data-i18n="message.emptyRecord"></td> -->
        </tbody>
      </table>
    </div>

    <div class="col-xs-6">
      <div class="dataTables_info" id="dynamic-table_info" role="status" aria-live="polite">

        <button data-i18n="[title]operation.add" class="btn btn-white btn-primary btn-bold" onclick="buttonAdd();">
          <span><i class="ace-icon fa fa-plus-circle bigger-120 primary"></i></span>
        </button>

        <!-- <button data-i18n="[title]operation.edit" class="btn btn-white btn-purple btn-bold" onclick="buttonEdit();"> -->
        <!--   <span><i class="ace-icon fa fa-edit bigger-120 purple"></i></span> -->
        <!-- </button> -->

        <button data-i18n="[title]operation.delete" class="btn btn-white btn-warning btn-bold" onclick="buttonRemove();">
          <span><i class="ace-icon fa fa-trash-o bigger-120 warning"></i></span>
        </button>

      </div>
    </div>


    <div class="col-xs-6">
      <div class="dataTables_paginate paging_simple_numbers" id="tablePage">
      </div>
    </div>


  </div>
</div>

<textarea id="templateTable" style="display:none">

  {{#empty}}
  <tr>
    <td align="center" colspan="2" data-i18n="message.emptyRecord"></td>
  </tr>
  {{/empty}}

  {{#data}}
  <tr>
    <td class="center"><input value="{{group_id}}" type="checkbox" class="ace sub"><span class="lbl"></span></td>
    <td>{{group_name}}</td>
  </tr>
  {{/data}}

</textarea>

<script type="text/javascript">

      loadTable();

      function loadTable(page)
      {
          mPage = page ? page : mPage;
          jsonm("template/group.php" + mPage,"#templateTable","#table");
      }

      function buttonAdd()
      {
          pbox("template_group_add");
      }

      function buttonRemove()
      {
          mconfirm(t("message.remove"),function(){
              jsonp("template/group_remove.php?id="+mIDBox,function(data){
                  mbox(data.msg);
                  loadTable();
              });
          });
      }

</script>
