<div *ngIf = "total_family == 0;">
</div>
<div *ngIf = "total_family > 0;">
    <ion-card (click)="familyAcc()">
<!--        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />-->
        <ion-card-header>
            <ion-card-title><span style="font-weight: bolder">Send a Reward</span></ion-card-title>
            <ion-card-subtitle><hr class="kid-line" /></ion-card-subtitle>
        </ion-card-header>
        <ion-card-content class="f-item">
            <ion-item lines="none">
                Task, Goals completed, well done, or promised - Time to send a reward.
                <ion-icon name="arrow-forward-circle-outline" slot="end"></ion-icon>
            </ion-item>
        </ion-card-content>
<!--        <ion-button fill="clear">Action 1</ion-button>-->
    </ion-card>

<!--    <ion-grid class="fast1">-->
<!--        <ion-row>-->
<!--            <ion-col class="title">Reward a Kid</ion-col>-->
<!--        </ion-row>-->
<!--        <ion-row>-->
<!--            <ion-col size="2" class="left-col_pic">-->
<!--                &lt;!&ndash;        <ion-col class="title">Reward a Kid</ion-col>&ndash;&gt;-->
<!--                <img  alt="" src="{{session_image_server}}}/{{curr_session}}/reward/{{sessionDataProviderService.member_uid}}" />-->
<!--            </ion-col>-->
<!--            <ion-col>-->
<!--                <ion-list [inset]="true">-->
<!--                    <ion-item [button]="true" *ngFor="let item of familyData" (click)="familyMemebr(item)">-->
<!--                        <ion-note slot="start">-->
<!--                            <img class="list_img" alt="" src="{{session_image_server}}}/{{curr_session}}/family/{{item.family_uid}}" />-->
<!--                        </ion-note>-->
<!--                        <ion-label>{{item.firstname}} ({{item.age}})</ion-label>-->
<!--                    </ion-item>-->
<!--                </ion-list>-->

<!--            </ion-col>-->
<!--        </ion-row>-->
<!--        <ion-row>-->
<!--            <ion-col>-->
<!--                <ion-button shape="round" size="small" expand="block" (click)="familyAcc()">Family Acounts</ion-button>-->
<!--            </ion-col>-->
<!--        </ion-row>-->
<!--    </ion-grid>-->

</div>




<!--<ion-card>-->
<!--  <ion-card-header>-->
<!--    Send Reward-->
<!--  </ion-card-header>-->
<!--  <ion-card-content>-->
<!--  <ion-grid style="height: 100%; padding: 0px">-->

<!--    <ion-row style="padding: 0px; margin: 0px">-->
<!--      <ion-col class="left-col" size="4">-->
<!--        1-->
<!--      </ion-col>-->
<!--    <ion-col>-->
<!--      <ion-list [inset]="true">-->
<!--        <ion-item [button]="true">-->
<!--          <ion-icon color="danger" slot="start" name="list-circle" size="large"></ion-icon>-->
<!--          <ion-label>General</ion-label>-->
<!--          <ion-note slot="end">6</ion-note>-->
<!--        </ion-item>-->
<!--        <ion-item [button]="true">-->
<!--          <ion-icon color="tertiary" slot="start" name="list-circle" size="large"></ion-icon>-->
<!--          <ion-label>Shopping</ion-label>-->
<!--          <ion-note slot="end">15</ion-note>-->
<!--        </ion-item>-->
<!--        <ion-item [button]="true">-->
<!--          <ion-icon color="success" slot="start" name="list-circle" size="large"></ion-icon>-->
<!--          <ion-label>Cleaning</ion-label>-->
<!--          <ion-note slot="end">3</ion-note>-->
<!--        </ion-item>-->
<!--        <ion-item [button]="true">-->
<!--          <ion-icon color="warning" slot="start" name="list-circle" size="large"></ion-icon>-->
<!--          <ion-label>Reminders</ion-label>-->
<!--          <ion-note slot="end">8</ion-note>-->
<!--        </ion-item>-->
<!--      </ion-list>-->
<!--    </ion-col>-->
<!--    </ion-row>-->
<!--  </ion-grid>-->

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