<section class="content-header">
    <h2 translate class="subheader-title">
        <span class="subheader-icon fal fa-users"></span> User Mail Folder Mapping
    <small> </small>
    </h2>
</section>

<section class="content">
    <div class="box padding-15" style="display: block;">
        <div class="row">
          <div class="col-sm-8 col-md-9">
            <div class="dataTables_length" id="datatable_length">
             <button  type="button" (click)="Add_mailfolder()" matbutton 
             class="btn btn-outline-primary waves-effect waves-themed btn-sm">
             <span class="fal fa-plus"></span>&nbsp; Add a Mail Folder</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-4 col-md-3">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}" 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>
          </div>
        </div>
        <div class="box-body">
            <div class="table-responsive">
              <table class="table table-bordered table-condensed table-hover table-striped">
                <thead class="headings">
                  <tr>
                    <th class="sno_width">#</th>
                    <th class="action_width">
                      <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('usrmailfoldername')">
                      User Mail Folder Name
                      <i *ngIf="key =='usrmailfoldername'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
                    </th>
                    <th class="pointer" (click)="sort('userid')">
                      User Name
                      <i *ngIf="key =='userid'" 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 user of mailfolderlst| 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)"> -->
                      <td >
                      <!-- <span class="fal fa-pencil blue" style="cursor:pointer;" *ngIf="edit==true" (click)="calluseradd(user.userid)"> -->
                        <span *ngIf="user.userid != null" class="fal fa-pencil blue" style="cursor:pointer;" (click)="edit_userfoldername(user)"></span>
                          <span *ngIf="user.userid == null" class="fal fa-plus blue" style="cursor:pointer;" (click)="add_userfoldername(user)">
                     
                      </span>&nbsp;&nbsp;
                      <!-- <span class="img-active" style="cursor:pointer;"
                            (click)="OpenConfirmTemplate(user)" title="Active"></span>
                      <span  class="img-inactive" style="cursor:pointer;"
                            (click)="OpenConfirmTemplate(user)" title="Inactive"></span> -->
                            <span *ngIf="user.active==1 && user.userid != null " class="img-active" style="cursor:pointer;"
                            (click)="OpenConfirmTemplate(user)" title="Active"></span>
                      <span *ngIf="user.active==0 && user.userid != null " class="img-inactive" style="cursor:pointer;"
                            (click)="OpenConfirmTemplate(user)" title="Inactive"></span>
                    </td>
                    <td>{{user.usrmailfoldername}}
                      &nbsp;&nbsp;<span (click)="edit_foldername(user)" ><i class="fa fa-pencil"></i></span></td>
                    <td>{{user.username}} </td>
                    <td>{{user.createdbyname}}</td>
                      <td>{{user.createdon | date:'MM-dd-yyyy'}}</td>
                      <td>{{user.updatedbyname}}</td>
                      <td>{{user.updatedon | date:'MM-dd-yyyy'}}</td>						  
                  </tr>
                  <tr *ngIf=" mailfolderlst.length==0">
                    <td colspan="11" style="text-align:center;">No Records Found</td>
                  </tr>

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


</section>

<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>