<ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-title color="light"> {{ts.trPK('home','worklist')}}</ion-title>
    <ion-buttons slot="start">
      <nav-buttons backLink="/home"></nav-buttons>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content [ngClass]=" direction == 'ltr' ? 'left' : 'right'">
  <!-- first select type view  -->
  <!-- <ion-item>
    <ion-label>{{ts.trPK('worklist','view')}}</ion-label>
    <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="notificationType"
      (ionChange)=onChangeView($event)>
      <ion-select-option value="1" selected="true">{{ts.trPK('worklist','openNot')}}</ion-select-option>
      <ion-select-option value="2">{{ts.trPK('worklist','fyi')}}</ion-select-option>
      <ion-select-option value="3">{{ts.trPK('worklist','toDo')}}</ion-select-option>
      <ion-select-option value="4">{{ts.trPK('worklist','all')}}</ion-select-option>
      <ion-select-option value="5">{{ts.trPK('worklist','meNot')}} </ion-select-option>
    </ion-select>

  </ion-item>

  <ion-item>
    <ion-label>{{ts.trPK('worklist','searchby')}}</ion-label>
    <ion-select  okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="searchBy"
      (ionChange)="getValueSelected($event)">
      <ion-select-option value="1">{{ts.trPK('worklist','from')}}</ion-select-option>
      <ion-select-option value="2">{{ts.trPK('worklist','subject')}}</ion-select-option>
      <ion-select-option value="3">{{ts.trPK('worklist','sent')}}</ion-select-option>
      <ion-select-option value="4">{{ts.trPK('worklist','itemType')}}</ion-select-option>
      <ion-select-option value="5">{{ts.trPK('worklist','none')}}</ion-select-option>

    </ion-select>
  </ion-item> -->
  <ion-grid>
    <ion-row>
      <ion-col size='3' class="ion-no-padding , menuListCol">
        <ion-list class="menuList">
          <ion-item class="menuListItem" lines="none">

            <ion-button class="menuListBtn" (click)="AllNotification()">
              <img *ngIf="!isAll" src="../assets/imgs/menuTabs/All1.png" />
              <img *ngIf="isAll" src="../assets/imgs/menuTabs/All2.png" />
            </ion-button>
          </ion-item>
          <ion-item class="menuListItem" lines="none">
            <!-- <ion-item lines="none" class="activeTabMenu"*ngIf="isPR"></ion-item> -->
            <!-- <ion-button  class="menuListBtn" (click)="PRNotification()"><p style="color: black;">PR</p></ion-button> -->
            <ion-button ion-button class="menuListBtn" (click)="PRNotification()">
              <img *ngIf="!isPR" src="../assets/imgs/menuTabs/PR1.png" />
              <img *ngIf="isPR" src="../assets/imgs/menuTabs/PR2.png" />
            </ion-button>
          </ion-item>
          <ion-item class="menuListItem" lines="none">

            <ion-button class="menuListBtn" (click)="PONotification()">
              <img *ngIf="!isPO" src="../assets/imgs/menuTabs/PO1.png" />
              <img *ngIf="isPO" src="../assets/imgs/menuTabs/PO2.png" />
            </ion-button>
          </ion-item>
          <ion-item class="menuListItem" lines="none">

            <ion-button class="menuListBtn" (click)="MRNotification()">
              <img *ngIf="!isMR" src="../assets/imgs/menuTabs/MR1.png" />
              <img *ngIf="isMR" src="../assets/imgs/menuTabs/MR2.png" />
            </ion-button>
          </ion-item>
          <ion-item class="menuListItem" lines="none">

            <ion-button class="menuListBtn" (click)="HRNotification()">
              <img *ngIf="!isHR" src="../assets/imgs/menuTabs/HR1.png" />
              <img *ngIf="isHR" src="../assets/imgs/menuTabs/HR2.png" />
            </ion-button>
          </ion-item>
          <ion-item class="menuListItem" lines="none">
            <ion-button class="menuListBtn" (click)="ITGNotification()">
              <img *ngIf="!isITG" src="../assets/imgs/menuTabs/ITG1.png" />
              <img *ngIf="isITG" src="../assets/imgs/menuTabs/ITG2.png" />
            </ion-button>
          </ion-item>
        </ion-list>
      </ion-col>
      <ion-col size='9' class="notifincationList">

        <ion-list class="notification-list" *ngIf="!noData">
          <div class="timelineMain">
            <ion-item class="itemListNotification" *ngFor="let notificationList of filteredNotificationList"
              lines='none'>

              <div class="item-date"> {{notificationList.BEGIN_DATE | dateString }} </div>
              <div class="timelineMain-item" slot="start">
                <!-- <div class="item-date"> {{notificationList.BEGIN_DATE }} </div> -->

                <div class="timelineMain-thumb bg-color-dot timelineMain-icon">
                </div>
              </div>

              <ion-label (click)="openNotificationDetail(notificationList)"> {{notificationList.SUBJECT}}
              </ion-label>

            </ion-item>

          </div>
        </ion-list>
        <ion-list class="emptyItem" *ngIf="noData">
          <ion-item class="itemListNotification" lines='none'>
            <ion-label> There is no Notification
            </ion-label>
          </ion-item>
        </ion-list>

        <!-- <ion-list class="notification-list " *ngIf="isPR">
          <div class="timeline">
            <p>PR</p>
          </div>
        </ion-list>


        <ion-list class="notification-list " *ngIf="isPO">
          <div class="timeline">
            <p>PO</p>
          </div>
        </ion-list>


        <ion-list class="notification-list " *ngIf="isMR">
          <div class="timeline">
            <p>MR</p>
          </div>
        </ion-list>


        <ion-list class="notification-list " *ngIf="isHR">
          <div class="timeline">
            <p>HR</p>
          </div>
        </ion-list>

        <ion-list class="notification-list " *ngIf="isITG">
          <div class="timeline">
            <p>ITG</p>
          </div>
        </ion-list> -->

      </ion-col>
    </ion-row>
  </ion-grid>


  <!-- *ngIf="rowsNo <= noOfrows" -->

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>


</ion-content>
<ion-footer class="footerSearchBtn" *ngIf="!isSearch">
  <ion-button color="customnavy" expand="full" fill="outline" (click)="searchBtn()">{{ts.trPK('worklist','search')}}
  </ion-button>
</ion-footer>

<ion-footer class="footerSearchBtn" *ngIf="isSearch">
  <ion-grid>
    <ion-row>
      <!-- <ion-col size='3'> </ion-col> -->
      <ion-col>
        <div class="viewAndSearch">
          <ion-item lines="none">
            <ion-label>{{ts.trPK('worklist','view')}}</ion-label>
            <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
              [(ngModel)]="notificationType" (ionChange)=onChangeView($event)>
              <ion-select-option value="1" selected="true">{{ts.trPK('worklist','openNot')}}</ion-select-option>
              <ion-select-option value="2">{{ts.trPK('worklist','fyi')}}</ion-select-option>
              <ion-select-option value="3">{{ts.trPK('worklist','toDo')}}</ion-select-option>
              <ion-select-option value="4">{{ts.trPK('worklist','all')}}</ion-select-option>
              <ion-select-option value="5">{{ts.trPK('worklist','meNot')}} </ion-select-option>
            </ion-select>

          </ion-item>
        </div>
        <div class="viewAndSearch">
          <ion-item>
            <ion-label>{{ts.trPK('worklist','searchby')}}</ion-label>
            <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
              [(ngModel)]="searchBy" (ionChange)="getValueSelected($event)">
              <ion-select-option value="1">{{ts.trPK('worklist','from')}}</ion-select-option>
              <ion-select-option value="2">{{ts.trPK('worklist','subject')}}</ion-select-option>
              <ion-select-option value="3">{{ts.trPK('worklist','sent')}}</ion-select-option>
              <ion-select-option value="4">{{ts.trPK('worklist','itemType')}}</ion-select-option>
              <ion-select-option value="5">{{ts.trPK('worklist','none')}}</ion-select-option>
            </ion-select>

          </ion-item>
          <div>
            <div *ngIf="HideDateInput==true">
              <ion-item lines='none'>
                <ion-label>{{ts.trPK('worklist','sent')}} </ion-label>
                <ion-datetime placeholder="{{ts.trPK('worklist','enter')}}" displayFormat="DD-MMM-YYYY"
                  pickerFormat="DD-MMM-YYYY" [(ngModel)]="InputDate"></ion-datetime>
              </ion-item>
            </div>
            <div *ngIf="HideTextInput==true">
              <ion-item>
                <ion-input placeholder="{{ts.trPK('worklist','enter')}}" [(ngModel)]="inputSearch">
                </ion-input>
              </ion-item>
            </div>
          </div>
          <div>
            <ion-button class="toSearchBtn" color="customnavy" expand="full" fill="outline"
              (click)="getAllPushNotificationFun()">
              {{ts.trPK('worklist','search')}}</ion-button>
            <ion-button class="toSearchBtn" color="customnavy" expand="full" fill="outline" (click)="searchBtn()">
              {{ts.trPK('general','close')}}</ion-button>
          </div>

          <ion-button color="customnavy" (click)="Details()">Call details ITG</ion-button>
          <ion-button color="customnavy" (click)="Count()">Call count ITG</ion-button>
          <!-- 
    <ion-button color="customnavy"   (click)="getAllPushNotificationFun()">{{ts.trPK('worklist','search')}}</ion-button> -->
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>