<app-generic-header
  showBack="true"
  backLink="/notification/homepage"
  [headerText]="'worklistMain,title' | translate">
</app-generic-header>

<ion-content class="colorBG">
  <ion-segment mode="md" color="secondary" (ionChange)="segmentChangedClick($event)"
    [value]="defaultSegment" class="ion-segment-all">

    <ion-segment-button value="{{segmentVal.name}}"
      [ngClass]="activeSegment == segmentVal.name ? 'active-Segment' : 'normal-Segment'"
      *ngFor="let segmentVal of segmentsArray">
      {{segmentVal.name}}
    </ion-segment-button>
  </ion-segment>

  <ion-card class="cardContent" *ngFor='let segmentContant of segmentData'>
    <ion-card-content *ngIf='activeSegment === segmentContant.name'>
      <ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
        <ion-row>
          <ion-col>
            <label class="colItemReq"> {{dataContant.Title}}</label>
            <br />
            <label *ngIf="dataContant.Value && dataContant.Type != 'table'">{{dataContant.Value}}</label>
            
            <div *ngIf="dataContant.MultipleValue && dataContant.Type == 'list'">
              <label *ngFor="let data of dataContant.MultipleValue">{{data}}</label>
            </div>
            
            <div *ngIf="dataContant.Value && dataContant.Type =='table'">
              <div *ngFor="let multiData of dataLabelAndValue">
                <div *ngFor="let dataAll of multiData">
                  <div *ngFor="let dataLabel of dataAll">
                    <label >{{dataLabel.label}}
                      <br/></label>
                      <div *ngIf="dataLabel.isTable =='false'">
                        <label >{{dataLabel.textvalue}}
                          <br/></label>
                          <br/>
                      </div>
                      <div *ngIf="dataLabel.isTable == 'true'">
                        <div *ngFor="let subData of dataLabel.textvalue">
                          <div>
                            <label >{{subData.label}}
                              <br/></label>
                              <label >{{subData.textvalue}}
                                <br/></label>
                              <br/>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </ion-col>
        </ion-row>
        <ion-row *ngIf='dataContant.TableValue'>
            <ion-col style="border: 1px solid gainsboro; border-radius: 15px; padding-left: 20px;">     
            <label class="colItemReq" *ngFor="let header of dataContant.TableValue.Header"><br /> {{header}}</label>
            <br />
            <label *ngFor="let rows of dataContant.TableValue.Rows"><br />{{rows}}</label>
            <label *ngIf="dataContant.TableValue.Rows"><br />none</label>
            </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- if there is additional screen like in VIDA -->
  <!-- <ng-container>
      <ion-card class="cardContent" *ngFor='let segmentContant of segmentDataTable'>
          <ion-card-content *ngIf='activeSegment === segmentContant.name'>
            <ion-grid style="text-align: left" *ngFor='let dataContant of segmentContant.data'>
              <ion-row *ngFor="let headerData of dataContant.Header">
                <ion-col>
                  <label class="colItemReq"> {{headerData}}</label>
                  <br />
                  <label>{{headerData}}</label>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-content>
        </ion-card>
  </ng-container> -->
  
  <!-- END -->

  <ion-card class="cardContent" *ngIf='activeSegment === "Approval Level"'>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-list class="notification-list" style="margin-left: -30px;" *ngFor="let approvalInfo of workList">
              <div class="timeline">
                <ion-item>
                  <div class="timeline-item" slot="start">
                    <div>

                      <button ion-button style=" background: none;width: 60%;">
                        <img src="../assets/imgs/noteSmall.png">
                      </button>
                      
                      <div
                        [ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending'}"
                        [class]="direction == 'en'? 'timeline-thumb-en  timeline-icon': 'timeline-thumb-ar  timeline-icon'"
                        [ngClass]="{'bg-gray-dot' : approvalInfo.Action === ''}">
                      </div>
                      <p style="margin-left: -0%; font-size: 12px !important; width: 66px;">{{approvalInfo.Action}}</p>
                    </div>
                  </div>
                  <div>
                    <p style="margin-left: 10%; font-weight: bold;">{{approvalInfo.Name}}</p>
                    <div *ngIf="approvalInfo.Notes">
                      <p style="margin-left: 10%;">{{ 'submitAbsence, comments' | translate}}:</p>
                      <p style="margin-left: 10%;">{{approvalInfo.Notes}}</p>

                    </div>
                  </div>

                </ion-item>
              </div>
            </ion-list>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
  
  <ion-card class="cardContent">
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col>
              <ion-label>
                  <h2 class="boldTxtNav">Comment</h2>
                </ion-label>
                <ion-input type='text' [(ngModel)]='commentText'></ion-input>
              
                <ion-item *ngFor="let object of grantInfo">
                  <ion-label>{{object.Label}}</ion-label>
                  <ion-select *ngIf="!object.ConditionalFieldName" [(ngModel)]='ExchangeServerSelected'
                    (ionChange)="filterGrantDB(ExchangeServerSelected,object, object.FieldName)" id='{{object.FieldName}}'>
                    <ion-select-option value="{{value}}" *ngFor="let value of object.Value">
                      {{value}}</ion-select-option>
                  </ion-select>
                  <ion-select *ngIf="object.ConditionalFieldName" [(ngModel)]='ExchangeServerDBSelected'
                    (ionChange)="filterGrantDB(ExchangeServerDBSelected,object)" id='{{object.FieldName}}'>
                    <ion-select-option value="{{value}}" *ngFor="let value of filteredGrantFieldsConditionalValue">
                      {{value}}</ion-select-option>
                  </ion-select>
                </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
</ion-content>


<ion-footer class="footerSearchBtn">


  <ion-tabs>
    <ion-tab-bar class="tabBar" slot="bottom" style="overflow-x: scroll;">

      <!-- <ion-tab-button *ngFor='let action of actionBTN' [hidden]="action.isAvailable" > -->
      <ion-tab-button style="max-width: 20%;" *ngFor='let action of actionBTN;  let i=index' [hidden]='!action.isAvailable'
        (click)="selectAtion(action.name)">

        <img [src]="action.image">
        <ion-label style="font-size: 11px;">{{action.name}}</ion-label>

      </ion-tab-button>

      <ion-tab-button (click)="skip()" style="max-width: 20%;">
        <img src="../assets/imgs/action-skip.png">
        <ion-label style="font-size: 11px;">Skip</ion-label>
      </ion-tab-button>

    </ion-tab-bar>

  </ion-tabs>



</ion-footer>