<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span>&nbsp;Server Master
    <small> </small>
  </h4>
</section>

<section class="content">
  <div class="box padding-15" style="display: block;">

    <div class="row">
      <div class="col-sm-9">
        <div class="dataTables_length" id="datatable_length">
          <button type="button" *ngIf="add==true" (click)="openServerModal(serverTemplate,'add')"
          class="btn btn-outline-primary waves-effect waves-themed btn-sm">
            <span class="fal fa-plus"></span>&nbsp;Add New</button>
            &nbsp; &nbsp; <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
              <i class="fal fa-chart-area"></i> Go back to dashboard</a>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Server Name" [(ngModel)]="searchText"
            aria-label="Search">
            <span class="input-group-append">
                <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
                  <span class="fal fa-search"></span>
                      </button>
      </span>
        </div>
        <!--<input id="txtPending" type="text" class="form-control table-search" [(ngModel)]="searchText" placeholder="Search" aria-label="Search">-->
      </div>
    </div>
    <div class="table-responsive">
      <table class="table jambo_table table-striped table-condensed table-hover">
        <thead>
          <tr class="headings">
            <th style="width:60px">#</th>
            <th *ngIf="(edit==true || delete==true)" style="width:110px;">


              <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
              <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;"
                (click)="getactiveinactive(false)" title="Show all"></span>
              <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;" (click)="getactiveinactive(true)"
                title="Show only active"></span>


            </th>
            <th class="pointer" (click)="sort('server')">
              Server
              <i *ngIf="key =='server'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('servertype')">
              Server Type
              <i *ngIf="key =='servertype'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('ipaddress')">
              IP Address
              <i *ngIf="key =='ipaddress'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('domain')">
              Domain
              <i *ngIf="key =='domain'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('impersonate')">
              Impersonate
              <i *ngIf="key =='impersonate'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

            <th class="pointer" (click)="sort('root_path')">
              Root Path
              <i *ngIf="key =='root_path'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('createdbyname')">
              Created By
              <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('createdon')">
              Created Date
              <i *ngIf="key =='createdon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('updatedbyname')">
              Last Modified By
              <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>
            <th class="pointer" (click)="sort('updatedon')">
              Last Modified Date
              <i *ngIf="key =='updatedon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
            </th>

          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="let item of servers| orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
            <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
            <td *ngIf="(edit==true || delete==true)">
              <span class="fal fa-pencil blue" style="cursor:pointer;"
                (click)="openServerModal(serverTemplate,'update',item)" title="Edit"
                *ngIf="edit==true"></span>&nbsp;&nbsp;
              <span *ngIf="item.active==1 && delete==true" class="img-active" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(item)" title="Active"></span>
              <span *ngIf="item.active==0 && delete==true" class="img-inactive" style="cursor:pointer;"
                (click)="OpenConfirmTemplate(item)" title="Inactive"></span>
            </td>

            <td>{{item.server}}</td>
            <td>{{item.servertype}}</td>
            <td>{{item.ipaddress}}</td>
            <td>{{item.domain}}</td>
            <td>{{item.impersonate}}</td>
            <td>{{item.root_path}}</td>
            <td>{{item.createdbyname}}</td>
            <td>{{item.createdon | date:'MM-dd-yyyy'}}</td>
            <td>{{item.updatedbyname}}</td>
            <td>{{item.updatedon | date:'MM-dd-yyyy'}}</td>
          </tr>
          <tr *ngIf="servers.length==0 || (servers |filter:searchText).length === 0">
            <td colspan="12" style="text-align:center;">No Records Found</td>
          </tr>

        </tbody>
      </table>
      <div *ngIf="servers && servers.length!=0" class="pull-right">
        <pagination-controls (pageChange)="p = $event"></pagination-controls>
      </div>
    </div>
  </div>
</section>
<div class="row">

  <ng-template #serverTemplate>
    <div class="modal-content" id="mainNgCnt" ngDraggable [handle]="dragHandle">
      <div class="modal-header" style="cursor:move" #dragHandle>
        <h4 class="modal-title pull-left" *ngIf="operation=='add'"><span class="fal fa-plus"></span>&nbsp;Add New Server
        </h4>
        <h4 class="modal-title pull-left" *ngIf="operation=='update'"><span class="fal fa-edit"></span>&nbsp;Edit Server
        </h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="serverModalRef.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <form [formGroup]="serverForm" (ngSubmit)="Post(serverForm.value)" class="form-horizontal">
          <input type="hidden" name="serverid" formControlName="serverid" />
          <table class="table">
            <tr>
              <td>
                <div class="form-group row">
                  <label class="col-sm-3">Server &nbsp;<span style="color:red;">*</span></label>
                  <div class="col-sm-9">
                    <input type="text" trim placeholder="Server Name" name="server" formControlName="server"
                      class="form-control" />
                    <div *ngIf="submitted && g.server.errors" class="invalid-feedback">
                      <div *ngIf="g.server.errors.required" class="errormsg">Server Name is required</div>
                    </div>
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">Server Type</label>
                  <div class="col-sm-9">
                    <select class="form-control" formControlName="servertypeid" id="servertypeid">
                      <option [value]='0'>--Select--</option>
                      <option *ngFor="let lst of servertypelist;" [value]="lst.servertypeid">
                        {{lst.servertype}}
                      </option>
                    </select>
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">IP Address</label>
                  <div class="col-sm-9">
                    <input type="text" trim placeholder="IP Address" name="ipaddress" formControlName="ipaddress"
                      class="form-control" />
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">User Name</label>
                  <div class="col-sm-9">
                    <input type="text" trim placeholder="User Name" name="username" formControlName="username"
                      class="form-control" />
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">Password</label>
                  <div class="col-sm-9">
                    <input type="password" trim placeholder="Password" name="password" formControlName="password"
                      class="form-control" />
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">Domain</label>
                  <div class="col-sm-9">
                    <input type="text" trim placeholder="Domain" name="domain" formControlName="domain"
                      class="form-control" />
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">Impersonate</label>
                  <div class="col-sm-9">
                    <input type="checkbox" trim placeholder="Impersonate" name="impersonate"
                      formControlName="impersonate" />
                  </div>
                </div>

                <div class="form-group row">
                  <label class="col-sm-3">Root Path</label>
                  <div class="col-sm-9">
                    <input type="text" trim placeholder="Root Path" name="root_path" formControlName="root_path"
                      class="form-control" />
                  </div>
                </div>
              </td>
            </tr>
            <tr *ngIf="operation=='update'">
              <td colspan="2">
                <div class="form-group row">
                  <input type="checkbox" (change)="ChangeActive($event)" name="active"
                    formControlName="active" /><label>Active</label>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="form-group">
                  <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right" (click)="clearForm();">Cancel</button>
                  <button type="submit" *ngIf="(edit==true || add==true)" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right"
                    [disabled]="serverForm.invalid">
                    <span *ngIf="operation=='add' && add==true">Add</span>
                    <span *ngIf="operation!='add' && edit==true">Update</span>
                  </button>
                </div>
              </td>
            </tr>
          </table>

        </form>


      </div>
    </div>
  </ng-template>

</div>