
<ion-header mode="ios" class="ion-no-border">
    <ion-toolbar>
        <ion-buttons slot="end">
            <!--      <ion-button>-->
            <!--        <ion-icon name="search-outline"></ion-icon>-->
            <!--      </ion-button>-->
        </ion-buttons>
        <ion-title>Suggest Task(s)</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <div class="boxed_contents">
<!--      <div class="flex">-->
<!--        <ion-label class="bold_text">Suggest Task(s)</ion-label>-->
<!--&lt;!&ndash;        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>&ndash;&gt;-->
<!--      </div>-->


      <ion-segment [(ngModel)]="tabs">
        <ion-segment-button value="about">
          <ion-label>Find</ion-label>
        </ion-segment-button>
        <ion-segment-button value="lesson">
          <ion-label>My List</ion-label>
        </ion-segment-button>
<!--        <ion-segment-button value="review">-->
<!--          <ion-label>Reviews</ion-label>-->
<!--        </ion-segment-button>-->
      </ion-segment>
        <div class="items">

        </div>
      <div *ngIf="tabs =='about'" class="about">
          <ion-grid>
              <ion-row>
                  <ion-col size="6" size-md="4" size-lg="2"  *ngFor="let item of sampleSuggestData; let i = index" (click)="suggestDetails(item)" >
                      <ion-card>
                          <img alt="{{item.post_title}}" src="https://www.wrenchboard.com/assets/images/apps/family/{{item.banner}}" />
                          <ion-card-content class="blog_text">

                              <div class="flex">
                                  <ion-label class="bold_text_suggest"> {{item.title}}</ion-label>
                                  <ion-icon slot="end" name="caret-forward-circle-outline" color="secondary"></ion-icon>
                              </div>
                          </ion-card-content>
<!--                          <ion-button fill="clear">Suggest</ion-button>-->
                      </ion-card>
                  </ion-col>
              </ion-row>
          </ion-grid>
      </div>

      <div *ngIf="tabs =='lesson'" class="lesson">
<app-suggestedlist></app-suggestedlist>

      </div>

    </div>
  </div>

    <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
        <ng-template>
            <ion-header>
                <ion-toolbar>
<!--                    <ion-buttons slot="start">-->
<!--                        <ion-button (click)="cancel()">Cancel</ion-button>-->
<!--                    </ion-buttons>-->
                    <ion-title>Suggest Task</ion-title>
<!--                    <ion-buttons slot="end">-->
<!--                        <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>-->
<!--                    </ion-buttons>-->
                </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">

                <ion-card>
                    <img class="back_image_sug" alt="{{modalSeleted.title}}" src="https://www.wrenchboard.com/assets/images/apps/family/{{modalSeleted.banner}}" />
                    <ion-card-header>
<!--                        <ion-card-title>{{modalSeleted.title}}</ion-card-title>-->
                        <ion-card-subtitle>{{modalSeleted.title}}</ion-card-subtitle>


                    </ion-card-header>

                    <ion-card-content>
                        <ion-item>
                            <ion-textarea
                                    placeholder="Type something here"
                                    [autoGrow]="true"
                                    value= "{{modalSeleted.description}}"
                            >
                            </ion-textarea>

                        </ion-item>

<!--                        <ion-textarea label="Description" labelPlacement="floating" fill="outline" placeholder="Enter text">-->
<!--                            {{modalSeleted.description}}-->
<!--                        </ion-textarea>-->
<!--                        {{modalSeleted.description}}-->

                        <ion-toolbar>
                            <ion-buttons slot="start">
                                <ion-button color="danger"  (click)="cancel()">Cancel</ion-button>
                            </ion-buttons>
<!--                            <ion-title>Buttons</ion-title>-->
                            <ion-buttons slot="end">
                                <ion-button color="secondary" (click)="sendSuggestedTask()">Send</ion-button>
                            </ion-buttons>
                        </ion-toolbar>


                    </ion-card-content>
                </ion-card>

<!--                <ion-button fill="clear">Action 1</ion-button>-->
<!--                <ion-button fill="clear">Send</ion-button>-->
            </ion-content>
<!--            <ion-footer>-->
<!--                <ion-toolbar>-->
<!--&lt;!&ndash;                    <ion-buttons slot="start">&ndash;&gt;-->
<!--&lt;!&ndash;                        <ion-button (click)="cancel()" color="danger">Cancel</ion-button>&ndash;&gt;-->
<!--&lt;!&ndash;                    </ion-buttons>&ndash;&gt;-->
<!--                    <ion-buttons slot="end">-->
<!--&lt;!&ndash;                        <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>&ndash;&gt;-->
<!--                        <ion-button (click)="cancel()" color="danger">Cancel</ion-button>-->

<!--                    </ion-buttons>-->
<!--                </ion-toolbar>-->
<!--            </ion-footer>-->
        </ng-template>
    </ion-modal>

</ion-content>

<!--<ion-footer>-->
<!--  <ion-toolbar>-->
<!--    <div class="button" (click)="onEnroll()">-->
<!--      <ion-label class="text">Enroll Course - $40</ion-label>-->
<!--    </div>-->
<!--  </ion-toolbar>-->
<!--</ion-footer>-->
