<ion-header>
  <ion-toolbar>
    <ion-title>Favorite</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div *ngIf="(bookmarks)?.length>0; else noBookmarks">
    <ion-list>
          <ion-item-sliding *ngFor="let item of bookmarks" >
    
              <ion-item (click)="startLesson(item)">
                  <ion-thumbnail slot="start">
                      <img src="{{item.headerImage}}">
                    </ion-thumbnail>
                    <ion-label>
                      <h2>{{item.headerTitle}}</h2>
                      <p>{{item.headerDesc}}</p>
                    </ion-label>
              </ion-item>
        
              <ion-item-options  side="end">
                  <ion-item-option color="secondary" (click)="removeBookmark(item)"><ion-icon size="large" name="trash" style="padding-left:5pt; padding-right:5pt"></ion-icon></ion-item-option>
                </ion-item-options>
        
            </ion-item-sliding>
            </ion-list>
            <ion-footer>
                <ion-grid>
                    <ion-row justify-content-center class="ion-align-items-end" >
                      <ion-col>
                          <div style="text-align: center;">
                          <p style="color:#666666">Da slide pe o lectie pentru a accesa optiunile ei.</p>
                        </div>
          
                      </ion-col>
                                 
                    </ion-row>
                  </ion-grid>
            </ion-footer>
      </div>

      <ng-template #noBookmarks>

          <ion-grid style="height: 100%">
              <ion-row justify-content-center align-items-center style="height: 100%">
                <div style="padding:30pt; text-align: center;">
                    <p>Cand vei adauga o lectie la favorite, ea va aparea aici. :)</p>
                    <ion-icon size="large" name="star"></ion-icon>

                </div>
              
              </ion-row>
            </ion-grid>


        </ng-template>
        
</ion-content>
