<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 Settings</ion-title>
  </ion-toolbar>
</ion-header>



<ion-content  class="ion-padding">
    <div class="boxed_contents">
        <ion-accordion-group>
            <ion-accordion value="first">
                <ion-item slot="header" color="light">
                    <ion-label>Add Family</ion-label>
                </ion-item>
                <div class="ion-padding" slot="content">Adding New Member</div>
            </ion-accordion>
            <ion-accordion value="second">
                <ion-item slot="header" color="light">
                    <ion-label>Relatives</ion-label>
                </ion-item>
                <div class="ion-padding" slot="content">Relatives list here plus add</div>
            </ion-accordion>
            <ion-accordion value="third">
                <ion-item slot="header" color="light">
                    <ion-label>Family Banner</ion-label>
                </ion-item>
                <div class="ion-padding" slot="content">

                    <ion-card>
                        <img alt="Family" src="{{session_image_server}}/{{curr_session}}/familybanner/{{member_uid}}" />
                        <ion-card-content style="text-align: right;">
                            <ion-button size="small" (click)="startCamera()">Change Banner</ion-button>
                        </ion-card-content>
                    </ion-card>

                </div>
            </ion-accordion>
        </ion-accordion-group>


<!--        <ion-list>-->
<!--            <ion-item>-->
<!--                <ion-icon aria-hidden="true" name="people" slot="start"></ion-icon>-->
<!--                <ion-label>Add Family</ion-label>-->
<!--            </ion-item>-->
<!--            <ion-item>-->
<!--                <ion-icon aria-hidden="true" name="people" slot="start"></ion-icon>-->
<!--                <ion-label>Relatives</ion-label>-->
<!--            </ion-item>-->
<!--            <ion-item>-->
<!--                <ion-icon aria-hidden="true" name="chatbubbles-outline" slot="start"></ion-icon>-->
<!--                <ion-label>Notifications</ion-label>-->
<!--            </ion-item>-->

<!--            &lt;!&ndash;    <ion-item>&ndash;&gt;-->
<!--            &lt;!&ndash;      <ion-icon aria-hidden="true" name="bluetooth" slot="start"></ion-icon>&ndash;&gt;-->
<!--            &lt;!&ndash;      <ion-label>Bluetooth</ion-label>&ndash;&gt;-->
<!--            &lt;!&ndash;    </ion-item>&ndash;&gt;-->
<!--            &lt;!&ndash;    <ion-item>&ndash;&gt;-->
<!--            &lt;!&ndash;      <ion-icon aria-hidden="true" name="call" slot="start"></ion-icon>&ndash;&gt;-->
<!--            &lt;!&ndash;      <ion-label>Cellular</ion-label>&ndash;&gt;-->
<!--            &lt;!&ndash;    </ion-item>&ndash;&gt;-->
<!--        </ion-list>-->

<!--        <ion-card>-->

<!--            <ion-card-header>-->
<!--                &lt;!&ndash;      <ion-card-title>Card Title</ion-card-title>&ndash;&gt;-->
<!--                <ion-card-subtitle>Family Banner</ion-card-subtitle>-->
<!--            </ion-card-header>-->
<!--            <img alt="Family" src="{{session_image_server}}/{{curr_session}}/familybanner/{{member_uid}}" />-->
<!--            <ion-card-content>-->
<!--                Change Banner-->
<!--            </ion-card-content>-->
<!--        </ion-card>-->
    </div>

</ion-content>
