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

<ion-content>

<ion-list>
    <ion-list-header>
      Subiecte selectate:
    </ion-list-header>

    <ion-item-sliding *ngFor="let item of categories" >

      <ion-item  (click)="presentModal(item)" *ngIf="item.progress!==null">
          <ion-thumbnail slot="start">
              <img src="{{item.img}}">
            </ion-thumbnail>
            <ion-label>
              <h2>{{item.name}}</h2>
              <p>{{item.desc}}</p>
              <ion-progress-bar color="primary" value="{{item.progress/item.lessonCount}}"></ion-progress-bar>
            </ion-label>
      </ion-item>

      <ion-item-options  side="end">
          <ion-item-option color="secondary" (click)="deselectCategory(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-list>
    <ion-list-header>
      Subiecte disponibile:
    </ion-list-header>


    <ion-item-sliding *ngFor="let item of categories">

        <ion-item (click)="presentModal(item)" *ngIf="item.progress===null">
            <ion-thumbnail slot="start">
                <img src="{{item.img}}">
              </ion-thumbnail>
              <ion-label>
                  <h2>{{item.name}}</h2>
                  <p>{{item.desc}}</p>
              
              </ion-label>
        </ion-item>
  
        <ion-item-options  side="end">
            <ion-item-option color="secondary" (click)="selectCategory(item)"><ion-icon size="large" name="add" 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">Dă slide pe categorie pentru a accesa opțiunile ei.</p>
              </div>

            </ion-col>
                       
          </ion-row>
        </ion-grid>
  </ion-footer>
</ion-content>

  <!--

<ion-grid no-padding>
        <ion-row no-padding>
          <ion-col size="6" no-padding *ngFor="let item of topics | async">
          <ion-card (click)="showModal(item)" no-padding>
              <img src="{{item.imagine}}  | async" style="width:100%; object-fit: cover; height:13vh!important;">
              <ion-card-subtitle>{{item.nume}}</ion-card-subtitle>
          </ion-card>
          </ion-col>
       
          
          </ion-row>
      
      

      </ion-grid>
-->
