WrenchBoardIonic2023/src/app/pages/home/home.page.html

<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-suggestedlist></app-suggestedlist>

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

<!--        <ion-card-content>-->
<!--          Here's a small text description for the-->
<!--        </ion-card-content>-->
      </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>
    <div class="offer">
      <div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></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">Recommended Blog</ion-label>
      <ion-label class="color_text" (click)="allBlog()">See all</ion-label>
    </div>
    <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>
      <!--    <ion-icon slot  ="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
    </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>