<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>-->
          <ion-icon name="help-circle-outline" size="medium" (click)="onHelp()"></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>
  </div>
  <ng-template #elseFulltag>

    <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>

  </ng-template>



</div>

  <div *ngIf="active_job_count != 0">


  </div>
</ion-content>


<!--<div *ngIf="isModalOpen==true">-->
<!--  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>-->
  <ion-modal  [isOpen]="isModalOpen">
    <ng-template>
    <ion-header  class="modal-head">
      <ion-toolbar>
        <ion-title>Help</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="setCloseModal()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <app-help-listing></app-help-listing>
    </ion-content>
    <ion-footer>
      <ion-grid style="background-color: lightgray;">
        <ion-row>
          <ion-col>

          </ion-col>
          <ion-col style="text-align: right;">
            <ion-button
                    (click)="setCloseModal()"
                    shape="round"
                    size="small"
                    color="danger">
              Close
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-footer>
  </ng-template>



  </ion-modal>
<!--</div>-->