<ion-content style="--background: #f5f5f5;">
  <div class="head-title">
    <app-generic-header showImage="false" showBack="true" [headerText]="'eit,cei' | translate">
    </app-generic-header>
  </div>

  <div padding>
    <ion-radio-group [(ngModel)]="selectedServiceType">
      <ion-item *ngFor="let user of familyMemberData" lines='none'
        style="padding-bottom: 10px; border-radius: 10px 10px 25px 25px;">
        <ion-grid>
          <ion-row>
            <ion-col>
              <h2 style="font-weight: bold; font-size: 15px;margin:0">{{user.CONTACT_NAME}}</h2>
            </ion-col>
            <ion-col [size]='direction === "ltr" ? 5 : 8 ' [offset]='direction === "ltr" ? 3 : 0 '>
              <div class='family-member-button' style="height: 32px !important; margin-left: -50px;">
                <ion-label>
                  <p>{{ts.trPK('eit','relationship-start-date')}}</p>
                </ion-label>
                <ion-label>
                  <p style="color: black;">12/31/2022</p>
                </ion-label>
              </div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-label>
                <p style="font-weight: bold; font-size: 14px; white-space:pre-wrap">{{user.RELATIONSHIP}}</p>
              </ion-label>
            </ion-col>
            <ion-col [size]='direction === "ltr" ? 5 : 8 ' [offset]='direction === "ltr" ? 3 : 0 '>
              <div class='family-member-button' style="height: 32px !important; margin-left: -50px;">
                <ion-label>
                  <p>{{ts.trPK('eit','relationship-end-date')}}</p>
                </ion-label>
                <ion-label>
                  <p style="color: black;">12/31/2022</p>
                </ion-label>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
        <ion-radio mode="md" slot="start" [value]="user" [color]="myColor" (click)='selectedUser(user)'></ion-radio>
      </ion-item>
    </ion-radio-group>
  </div>

</ion-content>

<ion-footer style="background: #f5f5f5 !important;">
  <div class="centerDiv">
    <ion-button  ion-button style="background: #269db8 !important; --background: #269db8">
      {{'vacation-rule, next-label' | translate}}</ion-button>
  </div>
</ion-footer>