<ion-header>
  <ion-toolbar class="header-toolbar-new">
      <ion-buttons slot="start">
        <nav-buttons backLink="/home"></nav-buttons>
      </ion-buttons>
      <ion-title>{{'home,worklist' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <div class="contentBg">
    <div class="result-graph">
      <div class="request-heading">
        <span>{{'work-list,open-analysis' | translate}}</span>
      </div>
      <div class="result-text-container">
          <h2>{{totalRequestCount}}</h2>
          <span>{{'work-list,total' | translate}} <br>{{'work-list,open-reqest' | translate}} </span>
      </div>
      <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
    </div>

    <ion-row class="filters-row">
      <ion-slides [options]="slideOptsOne">
          <ion-slide *ngFor="let filter of filters;  let i=index" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
              <app-card-filter
                [value]="filter.value"
                [text]="filter.name"
                [color]="filter.color"
                [active]="filter.active"
                (click)="activeFilter(i)"
              ></app-card-filter>
          </ion-slide>
      </ion-slides>
    </ion-row>
    
    <ion-row class="search-container">
        <ion-col style="float: left;" size=[6] *ngIf="showSearchButton" (click)="clearSearch()">
            <span style="margin-left: 5px;">{{'work-list,clear-search' | translate}}</span>
            <ion-icon name="close" ></ion-icon>
        </ion-col>
        <ion-col style="float: right;" size=[6] (click)="openSearchModal()" *ngIf="selectedFilter === 'ALL'">
            <ion-icon name="search" ></ion-icon>
            <span>{{'work-list,advanced-search' | translate}}</span>
        </ion-col> 
    </ion-row>
    <!-- <div class="total-result" *ngIf="isEmptyObject() && selectedFilter === 'ALL' && showSearchButton === false">
      <span>showing {{newWorkListResponse.length}} of {{filters[0].value}}</span>
    </div> -->

    <ion-row *ngIf='selectedFilter === "ITG"'>
      <ion-col>
        <ion-slides>
          <ion-slide class='slideCss' *ngFor="let segment of ITGSegment">
            <span [ngClass]="segment.style? 'text-span-active': 'text-span'" (click)="setActive(segment.code)">
                {{segment.name}}              
            </span>
          </ion-slide>
        </ion-slides>
      </ion-col>
    </ion-row>

    <div [ngClass]="isEmptyObject() && direction =='en' ? 'work-list-container-en' : 'work-list-container-ar'" *ngIf='selectedFilter != "ITG"'>
        <div *ngFor="let data of showFormattedData | keyvalue;  let i = index">
          <span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{data.key}}</span>
          <div (click)="openNotificationDetail(data.value)" class="date-data" *ngFor="let workList of data.value;  let j = index">
            <p>{{workList.SUBJECT}}</p>
          </div>
        </div>
    </div>


    <div [ngClass]="isEmptyObject() && direction =='en' ? 'work-list-container-en' : 'work-list-container-ar'" *ngIf="selectedFilter == 'ITG'" >
        <div  *ngFor='let segmentInfo of ITGItem[0]; let i= index' (click)='openITG(segmentInfo)'>
          <span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{segmentInfo.ModifiedDate |date}}</span>
          <div class="date-data">
            <p>{{segmentInfo.Title}}</p>
          </div>
        </div>
    </div>
  

    <div class="no-data-available" *ngIf="!isEmptyObject()">
      <span>{{'work-list,No-data-available' | translate}}</span>
    </div>
  </div>
  
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

