<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="{{(routerService.lastPage) ? routerService.lastPage : '/tasks'}}"></ion-back-button>
    </ion-buttons>
    <ion-title *ngIf="!currentGroup.groupingCodeFirstValue">{{currentGroup.name + (currentGroup.id === 'unsorted' ? '' : ' (' + currentGroup.categoryName + ')')}}</ion-title>
    <ion-title *ngIf="currentGroup.groupingCodeFirstValue">{{currentGroup.groupingCodeFirstValue}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="block-pages" *ngIf = "this.pages.length > 0">
    <div  *ngFor="let page of this.pages;let i = index" class="block-pages__item" (click)="getBlocks(i-1)">
      <div *ngIf="this.currentPage == i" class="block-pages__elem current">
        {{page}}
      </div>
      <div *ngIf="this.currentPage != i" class="block-pages__elem">
        {{page}}
      </div>
    </div>
  </div>

  <div class="empty-list" *ngIf="!resultBlocks || resultBlocks.length === 0">{{noTasksMessage}}</div>

  <ion-virtual-scroll [items]="resultBlocks" approxItemHeight="300px">
    <ion-item *virtualItem="let block;" [routerLink]="[block.link]" lines="full">
      <div class="task-shield" [ngClass]="{
        'task-shield--wait': true,
        'task-shield--success': block.status === 'success',
        'task-shield--unsuccess': block.status === 'unsuccess'
        }"></div>
      <ion-label class="block-label">
        <div class="icon-block" *ngIf="!taskService.isEasyMode()">
          <span *ngIf="!!block.categoryIcon" [innerHTML]="sanitizer.bypassSecurityTrustHtml(block.categoryIcon)" class="block-icon"></span>
          <span *ngFor="let icon of block.groupsIcons" [innerHTML]="sanitizer.bypassSecurityTrustHtml(icon)" class="block-icon"></span>
          <ion-icon src="assets/icon/new.svg" *ngIf="block.isNew" class="icon-new"></ion-icon>
        </div>
        <div class="block-title">{{block.comment}}</div>
        <div class="block-title">{{block.title}}</div>
        <div *ngIf="block.infostring !== null && block.infostring.infostring_value.length>0">
          <div *ngIf="!taskService.isEasyMode() && block.infostring.color.length > 0" [ngStyle]="{color:block.infostring.color}">
            <p><b>{{block.infostring.text}} : </b></p>
            <p *ngFor="let infostr of block.infostring.infostring_value">{{infostr}}</p>
          </div>
          <div *ngIf="taskService.isEasyMode() || block.infostring.color.length == 0">
            <p>{{block.infostring.text}} </p>
            <p *ngFor="let infostr of block.infostring.infostring_value">{{infostr}}</p>
          </div>
        </div>
      </ion-label>
      <ion-note class="block-count"><span class="important-count">{{block.importantCount}}</span>/{{block.count}}</ion-note>
    </ion-item>
  </ion-virtual-scroll>

</ion-content>
<div class="init-cover" [ngClass]="{'initialised': initialised}"></div>