<ion-header class="ion-no-border">
  <div *ngIf = "accountType == 'FAMILY';">
    <ion-toolbar>
      <div class="heading">
        <div class="left">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+profilePicture+')'"></div>
          <div>
            <ion-label class="grey_text">Hello</ion-label>
            <ion-label class="bold_text">{{firstname}}</ion-label>
          </div>
        </div>
<!--        <div class="right">-->
<!--          <ion-icon name="notifications-outline" (click)="onNotification()"></ion-icon>-->
<!--        </div>-->
      </div>
    </ion-toolbar>
  </div>

  <div *ngIf = "accountType == 'FULL';">
    <ion-toolbar>
      <div class="heading">
        <div class="left">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+profilePicture+')'"></div>
          <div>
            <ion-label class="grey_text">Hello</ion-label>
            <ion-label class="bold_text">{{firstname}}</ion-label>
          </div>
        </div>
        <div class="right">
          <ion-icon name="notifications-outline" (click)="onNotification()"></ion-icon>
        </div>
      </div>
    </ion-toolbar>
  </div>


</ion-header>

<ion-content class="ion-padding">

  <!-- <div class="search_box" (click)="onSearch()">
    <ion-icon slot="start" name="search"></ion-icon>
    <ion-label>Search</ion-label>
  </div> -->
<div class="boxed_contents">

  <div *ngIf = "accountType == 'FAMILY'; else elseFulltag">
<!--    <div class="lesson">-->
      <app-familypending></app-familypending>
      <app-suggestedlist></app-suggestedlist>

    <ion-grid class="fam1">
      <ion-row class="pend-row" >
        <ion-col class="famleft"
                 [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg)'"
                 [style.background-size]="contain"
        ></ion-col>
        <ion-col class="mid_place">
          <ion-label class="sug_text">Playground</ion-label>
          <ion-button shape="round" (click)="goPlayground()" fill="outline">Get Started</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>


<!--      <ion-card (click)="goPlayground()">-->
<!--        <img alt="AI PlayGround" src="https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg" />-->
<!--        <ion-card-header>-->
<!--&lt;!&ndash;          <ion-card-title>Card Title</ion-card-title>&ndash;&gt;-->
<!--          <ion-card-subtitle>Artificial Intelligence Playground</ion-card-subtitle>-->
<!--        </ion-card-header>-->

<!--&lt;!&ndash;        <ion-card-content>&ndash;&gt;-->
<!--&lt;!&ndash;          Here's a small text description for the&ndash;&gt;-->
<!--&lt;!&ndash;        </ion-card-content>&ndash;&gt;-->
<!--      </ion-card>-->

<!--      <ion-card>-->
<!--        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />-->
<!--        <ion-card-header>-->
<!--          &lt;!&ndash;          <ion-card-title>Card Title</ion-card-title>&ndash;&gt;-->
<!--          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
<!--        </ion-card-header>-->

<!--        <ion-card-content>-->
<!--          Here's a small text description for the-->
<!--        </ion-card-content>-->
<!--    </ion-card>-->

  </div>
  <ng-template #elseFulltag>
<!--    <ion-toolbar class="top-tool" *ngIf="walletDescription !='' || active_job_count != 0">-->
<!--      <ion-buttons slot="start">-->
<!--        <ion-button  *ngIf="walletDescription !='' " fill="solid"  color="secondary" shape="round" >{{walletDescription}}</ion-button>-->
<!--        <ion-button  fill="solid"  color="secondary" shape="round" > My Jobs</ion-button>-->
<!--      </ion-buttons>-->
<!--      <ion-buttons>-->
<!--        <ion-button  fill="solid"  color="secondary" shape="round" >{{walletDescription}}</ion-button>-->
<!--      </ion-buttons>-->
<!--&lt;!&ndash;      <ion-buttons>&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-button  fill="solid"  color="secondary" shape="round" >{{walletDescription}}</ion-button>&ndash;&gt;-->
<!--&lt;!&ndash;      </ion-buttons>&ndash;&gt;-->

<!--    </ion-toolbar>-->

    <ion-toolbar class="top-tool" *ngIf="walletDescription !='' || active_job_count != 0">
      <ion-buttons slot="secondary" *ngIf="walletDescription !='' ">
        <ion-button  shape="round" fill="solid"  color="primary" (click)="myWallet()">
          <ion-icon slot="end" name="wallet"></ion-icon>
          {{walletDescription}}
        </ion-button>
      </ion-buttons>
      <ion-buttons slot="primary" *ngIf="active_job_count != 0">
        <ion-button shape="round" fill="solid"  color="primary" (click)="myJobs(1)">
          My Jobs
          <ion-icon slot="end" name="list"></ion-icon>
        </ion-button>
      </ion-buttons>
<!--      <ion-title>{{walletDescription}}</ion-title>-->
    </ion-toolbar>
    <app-latest-market></app-latest-market>
    <app-fastreward></app-fastreward>
    <ion-card  class="map-sec" *ngIf="enableTracking > 0">
      <app-tracking></app-tracking>
      <ion-card-content>
        <ion-list>
          <ion-item lines="none">
            <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
<!--            <ion-icon aria-hidden="true" name="airplane" ></ion-icon>-->
            <ion-label>Family Location</ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>



    <div *ngIf = "homebannerCount <3;">
      <div class="offer">
        <div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></div>
      </div>
    </div>

    <div  *ngFor="let item of bannerData; let i = index" class="bg_white {{item.short_style}}  {{item.card_type}} "  (click)="onDetails(item)">
      <div class="list">
        <div *ngIf="item.banner_location === 'URL' ">
          <!-- code to render a large video block-->
          <div class="bg_image back_image banner_image" [style.backgroundImage]="'url('+item.banner+')'"></div>
        </div>
        <div *ngIf="item.banner_location === 'LOCAL' ">
          <div class="bg_image back_image banner_image" [style.backgroundImage]="'url(assets/images/'+item.banner+')'"></div>
        </div>

        <div class="detail">
          <ion-label class="name">{{item.short_title}}</ion-label>
          <ion-label class="bg_text ovf">{{item.short_description}}</ion-label>


          <!--        <ion-label class="price">$48.00 </ion-label>-->

          <!--        <div class="row">-->
          <!--          &lt;!&ndash;          <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
          <!--          &lt;!&ndash;          <ion-label class="small">4.9</ion-label>&ndash;&gt;-->
          <!--          &lt;!&ndash;          <ion-label class="small">|</ion-label>&ndash;&gt;-->
          <!--          &lt;!&ndash;          <ion-label class="small">8266 Students</ion-label>&ndash;&gt;-->
          <!--        </div>-->
        </div>
      </div>
      <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
    </div>
    <div class="flex">
      <ion-label class="bold_text">Recent Blog</ion-label>
      <ion-label class="color_text" (click)="allBlog()">See all</ion-label>
    </div>

    <ion-grid>
      <ion-row class="bg_white bg_alice" *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)">
        <ion-col>
          <div class="detail">
            <ion-label class="name">{{item.post_title}}</ion-label>
            <ion-label class="extra_text"><span class="title">Published:</span>{{item.post_date | date}}</ion-label>
          </div>
        </ion-col>
        <ion-col size="auto">
          <div style="width: 95px; height: 95px; border-radius: 10px" class="bg_image back_image banner_image" [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'">
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

<!--    <div class="bg_white bg_alice" *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)">-->
<!--      <div class="blog_list">-->
<!--        <div class="detail">-->
<!--          <ion-label class="name">{{item.post_title}}</ion-label>-->
<!--        </div>-->
<!--        <div class="bg_image back_image banner_image" [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'"></div>-->
<!--      </div>-->
<!--      &lt;!&ndash;    <ion-icon slot  ="end" name="bookmark-outline" class="save" color="primary"></ion-icon>&ndash;&gt;-->
<!--    </div>-->
  </ng-template>



</div>

  <!-- <div class="flex">
    <ion-label class="bold_text">Top Mentors</ion-label>
    <ion-label class="color_text" (click)="onTopMentors()">See all</ion-label>
  </div>

  <div class="story-item">
    <div class="menu">
      <div class="item" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
        <ion-thumbnail> <img src="assets/images/p1.jpg" /> </ion-thumbnail>
        <ion-label>Bob</ion-label>
      </div>
    </div>
  </div> -->

  <!-- <div class="flex">
    <ion-label class="bold_text">Most Popular Courses</ion-label>
    <ion-label class="color_text" (click)="onPopular()">See all</ion-label>
  </div>

  <div class="story-item">
    <div class="menu">
      <div class="text">
        <ion-label class="select">All</ion-label>
        <ion-label>Design</ion-label>
        <ion-label>Business</ion-label>
        <ion-label>Education</ion-label>
        <ion-label>Finance</ion-label>
      </div>
    </div>
  </div> -->

<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>-->
  <div *ngIf="active_job_count != 0">

<!--    <ion-fab slot="fixed"  class="job_fab" vertical="top" color="primary" horizontal="end" [edge]="true">-->
<!--      <ion-fab-button>-->
<!--        <ion-label>My Jobs</ion-label>-->
<!--      </ion-fab-button>-->
<!--      <ion-fab-list side="bottom">-->
<!--        <ion-fab-button  color="secondary" (click)="myJobs(1)">-->
<!--          <ion-icon name="list"></ion-icon>-->
<!--        </ion-fab-button>-->
<!--        <ion-fab-button color="success" (click)="myJobs(2)">-->
<!--          <ion-icon name="list"></ion-icon>-->
<!--        </ion-fab-button>-->
<!--        <ion-fab-button color="danger" (click)="myJobs(3)">-->
<!--        </ion-fab-button>-->
<!--      </ion-fab-list>-->
<!--    </ion-fab>-->

  </div>





</ion-content>
