<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="onBack()">
      <ion-button>
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <!--      <ion-button>-->
      <!--        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
      <!--      </ion-button>-->
    </ion-buttons>
    <ion-title>Family Account</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="boxed_contents">
    <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/familybanner/'+member_uid+')'">
<!--      <div class="ion-padding">-->
<!--        <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
<!--      </div>-->
    </div>

    <div class="ion-padding">
      <div class="flex">
        <ion-label class="bold_text">Family Account</ion-label>
              <ion-icon slot="end" name="settings-outline" color="primary" (click)="familySettings()"></ion-icon>
      </div>

      <!--    <div class="row">-->
      <!--      <div class="rate">-->

      <!--        <ion-button size="small" fill="outline"><ion-icon name="star-half-outline" color="warning"></ion-icon> 0 Task waiting to start</ion-button>-->
      <!--&lt;!&ndash;        <ion-label class="review"></ion-label>&ndash;&gt;-->
      <!--      </div>-->
      <!--    </div>-->

      <!--    <ion-label class="color_text">$40</ion-label>-->
      <div class="items">

      </div>

      <ion-segment class="common_segment" [(ngModel)]="tabs">
        <ion-segment-button value="members">
          <ion-label>Members ({{total_family}})</ion-label>
        </ion-segment-button>
        <ion-segment-button value="lesson">
          <ion-label>Tasks ({{family_active}})</ion-label>
        </ion-segment-button>
        <ion-segment-button value="pending">
          <ion-label>Pending ({{suggestion_total}}) </ion-label>
        </ion-segment-button>
      </ion-segment>

      <div *ngIf="tabs =='members'" class="lesson">

        <div class="video" *ngFor="let item of familyData" (click)="familyMemebr(item)">
          <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/family/'+item.family_uid+')'"></div>

            <div class="text">
              <ion-label class="bold_text name_bg_text">{{item.firstname}} {{item.lastname}} ({{item.age}})</ion-label>
<!--              <ion-label class="grey_text"> {{item.last_login}}</ion-label>-->
              <ion-label class="extra_text"><span class="title">Last Login:</span>{{item.last_login | date}}</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>

      </div>

      <div *ngIf="tabs =='lesson'" class="lesson">
        <div class="flex">
          <ion-label class="bold">Total : {{family_active}}</ion-label>
        </div>

        <!--      <div class="sec">-->
        <!--        <ion-label class="grey">Section 1 - Introduction</ion-label>-->
        <!--        <ion-label class="color">15 min</ion-label>-->
        <!--      </div>-->

        <div class="video" *ngFor="let item of jobManagerActiveData"  (click)="jobActive(item)">
          <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/task-list.svg)'"></div>

            <div class="text">
              <ion-label class="bold_text">{{item.title}}</ion-label>
              <ion-label class="grey_text">{{item.job_description}}</ion-label>
              <ion-label class="price_line">{{item.contract}}   {{item.price*0.01}} {{item.currency}}  </ion-label>
              <ion-label class="due_date">Due Date: {{item.delivery_date |date}}</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>

      </div>

      <div *ngIf="tabs =='pending'" class="lesson">

        <div *ngIf="suggestion_total == 0">
          <ion-card>
            <img alt="WrenchBoard" src="https://www.wrenchboard.com/assets/images/apps/no-pending.jpg" />
            <ion-card-header>
              <ion-card-title>No Pending</ion-card-title>
              <ion-card-subtitle>You have 0 pending suggestions</ion-card-subtitle>
            </ion-card-header>

            <ion-card-content>
              It's fun when the family recommends activities for your approval.  Any family member can log in to their profile and send what they are interested in.
            </ion-card-content>
          </ion-card>
        </div>


        <div *ngIf="suggestion_total > 0">
          <div class="total">
<!--            <div class="star-rate">-->
<!--              <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--              <ion-label class="bold">{{suggestion_total}} Items</ion-label>-->
<!--            </div>-->
            <!--        <ion-label class="color">See all</ion-label>-->
          </div>

          <div class="video" *ngFor="let item of familyPendingData" >
            <div class="left">
              <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>

              <div class="text">
                <ion-label class="bold_text name_bg_text">{{item.firstname}} </ion-label>
                <ion-label class="bold_text">{{item.title}}</ion-label>
                <ion-label class="grey_text">{{item.description}}</ion-label>
                <ion-label class="extra_text"><span class="title">Added:</span> {{item.added}}</ion-label>
                <ion-label class="extra_text"><span class="title">Status:</span> {{item.status_text}}</ion-label>
              </div>
            </div>
            <div class="right">
              <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
            </div>
          </div>

<!--          <div class="reviw_list" *ngFor="let item of familyPendingData">-->
<!--            <div class="profile">-->
<!--              <div class="left">-->
<!--                <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>-->
<!--                <div style="margin-left: 10px;">-->
<!--                  <ion-label class="bold">{{item.title}}</ion-label>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="right">-->
<!--                <div class="select">-->
<!--                  &lt;!&ndash;              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>&ndash;&gt;-->
<!--                  <ion-label class="rate_num">{{item.status_text}}</ion-label>-->
<!--                </div>-->
<!--                &lt;!&ndash;            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>&ndash;&gt;-->
<!--              </div>-->
<!--            </div>-->
<!--            <ion-label>{{item.description}}-->
<!--            </ion-label>-->

<!--            <div class="like">-->
<!--              &lt;!&ndash;          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>&ndash;&gt;-->
<!--              <ion-label class="name_bg_text">{{item.firstname}} </ion-label>-->
<!--              <ion-label class="time">{{item.added}}</ion-label>-->
<!--            </div>-->
<!--          </div>-->
        </div>

        <!--      <div class="story-item">-->
        <!--        <div class="menu">-->
        <!--          <div class="text">-->
        <!--            <div class="select show">-->
        <!--              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num white">All</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">1</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">2</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">3</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">4</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">5</ion-label>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--      </div>-->


      </div>

    </div>
  </div>


</ion-content>

<!--<ion-footer>-->
<!--  <ion-toolbar>-->
<!--    <div class="button" (click)="onBack()">-->
<!--      <ion-label class="text">Return</ion-label>-->
<!--    </div>-->
<!--  </ion-toolbar>-->
<!--</ion-footer>-->
