
<ion-content>
  <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg)'">
    <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">A.I. Playground</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"  *ngFor="let item of playFastMenu; let i=index ">
        <ion-icon slot="start" name="people" color="primary"></ion-icon>
        <ion-label>{{item.name}}</ion-label>
      </div>
<!--      <div class="stud">-->
<!--        <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
<!--        <ion-label>{{item.name}}</ion-label>-->
<!--      </div>-->
<!--      <div class="stud">-->
<!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
<!--        <ion-label>No idea 3</ion-label>-->
<!--      </div>-->
    </div>




    <div  class="lesson">
<!--      <div class="flex">-->
<!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
<!--        <ion-label class="color">See all</ion-label>-->
<!--      </div>-->
      <div  *ngFor="let item of playListData; let i=index " >

        <div class="sec">
          <ion-label class="grey">{{item.name}}</ion-label>
          <!--        <ion-label class="color">15 min</ion-label>-->
        </div>

        <div class="video" *ngFor="let iteml of item.item_list.item">
          <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">{{iteml.title}}</ion-label>
              <ion-label class="grey_text">{{iteml.description}}</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </div>
        </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>
