<div class="video" style="background-color: #fbfdfd;" *ngFor="let item of familyPendingData" (click)="processFamilyPending(item)">
  <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 *ngIf="isModalOpenBackdrop==true">
  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
  <ion-modal class="common_modal" [isOpen]="isModalOpen"><ng-template>
    <ion-header class="modal-head">
      <ion-toolbar>
        <ion-title>{{modalTile}}</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="setCloseModal()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
<div>
  <div class="t_label">Title</div>
  <div class="t_item">{{selectedItem.title}}</div>

  <div class="t_label">Description</div>
  <div class="t_item">{{selectedItem.description}}</div>

  <ion-grid style="background-color: #ecf0f4;
                  margin-top: 10px;
                  margin-bottom: 10px;
                  border-radius: 10px;">
    <ion-row>
      <ion-col>
        <div class="t_label">Reward</div>
        <div class="t_item" style="display: flex;">
          <ion-input  [(ngModel)]='price'
                      (ionChange)="testInputs()"
                      style="background-color: #dff8df;
                      border-radius: 10px 0px 0px 10px;"></ion-input>
          <div style="max-width:2px;background-color: white; "></div>
          <ion-select style="max-width: 100px;
                      background-color: #f5f8f5;
                      border-radius: 0px 10px 10px 0px;"
                      [(ngModel)]='country'
                      (ionChange)="testInputs()"
                      aria-label="Favorite Fruit" value="Naira">
            <ion-select-option *ngFor="let item of walletData" value="{{item.country}}">{{item.code}}</ion-select-option>
<!--            <ion-select-option value="US">USD</ion-select-option>-->
          </ion-select>
        </div>
      </ion-col>
      <ion-col>
        <div class="t_label">Timeline</div>
        <div class="t_item">
          <ion-select
                  [(ngModel)]='timeline_days'
                  (ionChange)="testInputs()"
                  aria-label="Time Line" value="0"
                  style="background-color: #dff8df;
                  border-radius: 10px 10px 10px 10px;">
            <ion-select-option *ngFor="let item of timelineOptions" value="{{item.val}}">{{item.tx}}</ion-select-option>
          </ion-select>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>



<!--  <div class="t_label">Title</div>-->
<!--  <div class="t_item">The_real_data_hrere</div>-->

  <div class="t_label">Delivery Details</div>
  <div class="t_item">
    <ion-textarea
            style="height: 120px; background-color: #dff8df;"
            [(ngModel)]='job_detail'
            (ionChange)="testInputs()"
            label="Delivery Details"
            labelPlacement="fixed"
            placeholder="Enter text"></ion-textarea>

<!--    <ion-list>-->
<!--     -->
<!--      <ion-item>-->
<!--        <ion-textarea label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-textarea>-->
<!--      </ion-item>-->
<!--      <ion-item>-->
<!--        <ion-textarea label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-textarea>-->
<!--      </ion-item>-->
<!--    </ion-list>-->
  </div>

</div>



    </ion-content>
    <ion-footer>
      <ion-grid style="background-color: lightgray;">
        <ion-row>
          <ion-col>
            <ion-button
                    (click)="setCloseModal()"
                    shape="round"
                    size="small"
                    color="danger">
              Close
            </ion-button>
          </ion-col>
          <ion-col></ion-col>
          <ion-col>
            <ion-button
                    shape="round"
                    size="small"
                    [disabled]="isDisabled"
                    (click)="processTask()">Assign Task </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>


    </ion-footer>
  </ng-template>
  </ion-modal>
</div>