
<ion-content>
  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+suggestData.banner+')'">
    <div class="ion-padding">
      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
    </div>
  </div>

  <div class="ion-padding">
    <div class="flex">
      <ion-label class="bold_text">{{suggestData.title}}</ion-label>
<!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
    </div>

<!--    <div class="row">-->
<!--      <ion-label class="bg_text">3D Design</ion-label>-->
<!--      <div class="rate">-->
<!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
<!--      </div>-->
<!--    </div>-->

<!--    <ion-label class="color_text">$40</ion-label>-->

    <div class="items">
      <div class="stud">
        <ion-label>{{suggestData.description}}</ion-label>
      </div>
    </div>

    <div class="items">
      <div class="stud">
        <ion-icon slot="start" name="time" color="primary"></ion-icon>
        <ion-label>Send: {{suggestData.added |date}}</ion-label>
      </div>
      <div class="stud">
        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>
        <ion-label>Status: {{suggestData.status_text}}</ion-label>
      </div>
    </div>

    <ion-segment [(ngModel)]="tabs">
      <ion-segment-button value="about">
        <ion-label>Actions</ion-label>
      </ion-segment-button>
      <ion-segment-button value="lesson">
        <ion-label>History</ion-label>
      </ion-segment-button>
    </ion-segment>

    <div *ngIf="tabs =='about'" class="about">
      <ion-grid>
        <ion-row>
          <ion-col class="mtop">
            <ion-button expand="block" (click)="sendReminder()">Send Reminder</ion-button>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="mtop">
            <ion-button color="danger" expand="block" (click)="cancelSuggest()">Cancel Request</ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

    <div *ngIf="tabs =='lesson'" class="lesson">
<!--      <div class="flex">-->
<!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
<!--        <ion-label class="color">See all</ion-label>-->
<!--      </div>-->

<!--      <div class="sec">-->
<!--        <ion-label class="grey">Section 1 - Introduction</ion-label>-->
<!--        <ion-label class="color">15 min</ion-label>-->
<!--      </div>-->

      <div class="video" *ngFor="let item of suggestActionData">
        <div class="left">
          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>

          <div class="text">
            <ion-label class="bold_text">Why Using Figma ?</ion-label>
            <ion-label class="grey_text">10 mins</ion-label>
          </div>
        </div>
        <div class="right">
          <ion-icon name="lock-closed-outline"></ion-icon>
        </div>
      </div>
    </div>


  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <div class="button" (click)="onBack()">
      <ion-label class="text">Return</ion-label>
    </div>
  </ion-toolbar>
</ion-footer>
