<div class="container" style="width:100%;margin-top:15px;">
  <div class="subnav org-toolbar">

    <div class="batch-middle right">
      <md-button class="md-raised" ng-click="show_create_modal()">
        {{ "global.CREATE_SERVICE_USER_TAG" | translate }}
      </md-button>
    </div>

    <div class="left non-admin-search">
      <md-input-container class="md-block md-icon-float">
        <md-icon md-font-set="material-icons"> search </md-icon>
        <label>{{ "action.SEARCH_TAG" | translate }}...</label>
        <input type="search" ng-model="search_value" ng-change="page_app_user()" autocomplete="off">
      </md-input-container>
    </div>

  </div>
  
  <div class="table-list-header">
    <label class="table-list-header-select-all">
      <md-checkbox ng-change="check_all_changed(selected_all.selected)" ng-model="selected_all.selected" aria-label="Select All">
      </md-checkbox>
    </label>
    <div class="member-toolbar-actions right">
      <md-button class="md-icon-button" aria-label="edit" ng-click="show_edit_modal()">
        <md-icon md-font-set="material-icons" ng-show="should_show_edit_button()"> edit </md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="delete" ng-click="show_remove_modal()">
        <md-icon md-font-set="material-icons" ng-show="should_show_remove_button()"> delete </md-icon>
      </md-button>
    </div>
  </div>

  <div id="org-members">
    <ul class="member-listing table-list table-list-bordered adminable">
      <li class="table-list-item member-list-item" dir-paginate="member in group | itemsPerPage: items_per_page" current-page="page_number" total-items="total_items">
        <!--      <li class="table-list-item member-list-item" ng-repeat="member in group"> -->
        <div class="table-list-cell table-list-cell-checkbox">
          <md-checkbox ng-model="member.selected" ng-disabled="member.is_owner_user==1" aria-label="check"> </md-checkbox>
        </div>

        <div class="table-list-cell member-info">
          <!-- <img alt="{{member.device_user_fullname}}" class="avatar member-list-avatar" height="48" ng-src="{{member.device_user_icon?'/icon/'+member.device_user_icon:'/static/yvertical/img/default-app.png'}}" width="48"> -->
          <span class="member-link css-truncate">
            <strong class="member-username css-truncate-target">{{member.user_fullname}}</strong>
          </span>
        </div>

        <div class="member-meta table-list-cell" style="font-size:15px;" ng-show="{{member.is_owner_user==1}}">
          {{ "field.OWNER_TAG" | translate }}
        </div>
        <div class="member-meta table-list-cell" style="font-size:15px;" ng-show="{{!member.is_owner_user==1}}">
          {{ "field.SERVICE_USER_TAG" | translate }}
        </div>

        <div class="member-meta table-list-cell" style="font-size:15px;padding-left:0">
          {{email_handler(member.user_email)}}
        </div>
        
      </li>
    </ul>
    <div class="paginate-container">
      <dir-pagination-controls auto-hide="false" boundary-links="true" on-page-change="page_app_user(newPageNumber)">
      </dir-pagination-controls>
    </div>
  </div>
</div>

<div class="modal fade" id="remove_user">
  <div class="modal-dialog" style="margin-top: 300px;width: 600px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><strong>{{ "global.REMOVE_SERVICE_USER_TAG" | translate }}</strong></h4>
      </div>
      <div class="modal-body" style="color: #D03F3F;">
        <p>{{ "global.REMOVE_SERVICE_USER_INFO_TAG" | translate }} </p>
        <p ng-repeat="user in to_be_removed_users" style="color: #000000;"> {{ user.user_fullname }} </p> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">{{ "action.CANCEL_TAG" | translate }}</button>
        <button type="button" class="btn btn-danger" style="background-image: linear-gradient(#C16552, #E24215);"
                ng-click="remove_users(to_be_removed_users)">{{ "action.REMOVE_TAG" | translate }}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="batch_create_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document" style="top: 150px;" >
    <div class="modal-content" >
      <form name="create-service-user-form" ng-submit="create_service_user_form_submit()">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">
            <strong>{{ "action.CREATE_TAG" | translate }}</strong>
          </h4>
        </div>
        
        <div class="modal-body">
          <md-input-container class="md-block">
            <label>{{ "field.USER_FULLNAME_TAG" | translate }}</label>
            <input ng-model="create_user_direct.name" md-maxlength="64" required>
          </md-input-container>

          <md-input-container class="md-block">
            <label>{{ "field.USER_EMAIL_TAG" | translate }}</label>
            <input ng-model="create_user_direct.email" md-maxlength="128" required>
          </md-input-container>

          <md-input-container class="md-block md-icon-float md-icon-right" style="padding-left:0px !important;">
            <label>{{ "field.USER_PASSWORD_TAG" | translate }}</label>
            <input type="{{ create_user_direct.password_input_type }}" ng-model="create_user_direct.password" required>
            <md-icon md-font-set="material-icons" ng-if="!create_user_direct.user_password_is_visible" ng-click="show_user_password(true)"> visibility </md-icon>
            <md-icon md-font-set="material-icons" ng-if="create_user_direct.user_password_is_visible" ng-click="show_user_password(false)"> visibility_off </md-icon>
          </md-input-container>
        </div>
        
        <div class="modal-footer">
          <md-button type="submit" class="md-raised">{{ "action.CREATE_TAG" | translate }}</md-button>
        </div>
        
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="batch_edit_user" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="top: 150px;" >
    <div class="modal-content" >
      <form name="edit-service-user-form" ng-submit="edit_service_user_form_submit()">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">
            <strong>{{ "action.EDIT_TAG" | translate }}</strong>
          </h4>
        </div>
        
        <div class="modal-body">
          <md-input-container class="md-block">
            <label>{{ "field.USER_FULLNAME_TAG" | translate }}</label>
            <input ng-model="edit_user_direct.name" md-maxlength="64" required>
          </md-input-container>

          <md-input-container class="md-block">
            <label>{{ "field.USER_EAMIL_TAG" | translate }}</label>
            <input ng-model="edit_user_direct.email" md-maxlength="128" required>
          </md-input-container>

          <md-input-container class="md-block md-icon-float md-icon-right" style="padding-left:0px !important;">
            <label>{{ "field.USER_PASSWORD_TAG" | translate }}</label>
            <input type="{{ edit_user_direct.password_input_type }}" ng-model="edit_user_direct.password">
            <md-icon md-font-set="material-icons" ng-if="!edit_user_direct.user_password_is_visible" ng-click="show_edit_user_password(true)"> visibility </md-icon>
            <md-icon md-font-set="material-icons" ng-if="edit_user_direct.user_password_is_visible" ng-click="show_edit_user_password(false)"> visibility_off </md-icon>
          </md-input-container>
        </div>
        
        <div class="modal-footer">
          <md-button type="submit" class="md-raised">{{ "action.SAVE_TAG" | translate }}</md-button>
        </div>
        
      </form>
    </div>
  </div>
</div>


