WrenchBoardIonic2023/src/app/pages/payment/payment.page.html

<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-title>Card & Accounts</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <div class="boxed_contents">
    <div class="flex">
<!--      <ion-label class="bold_text">Card & Accounts</ion-label>-->
<!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
    </div>

    <div class="row">
<!--      <ion-label class="bg_text">3D Design</ion-label>-->
<!--      <div class="rate">-->
<!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
<!--      </div>-->
    </div>

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

<!--    <div class="items">-->
<!--&lt;!&ndash;      <div class="stud">&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-icon slot="start" name="people" color="primary"></ion-icon>&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-label>9876 Students</ion-label>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="stud">&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-icon slot="start" name="time" color="primary"></ion-icon>&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-label>2.5 hours</ion-label>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="stud">&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>&ndash;&gt;-->
<!--&lt;!&ndash;        <ion-label>Certificate</ion-label>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->

    <ion-segment class="common_segment" [(ngModel)]="tabs">
      <ion-segment-button value="cards">
        <ion-label>Cards</ion-label>
      </ion-segment-button>
      <ion-segment-button value="accounts">
        <ion-label>Accounts</ion-label>
      </ion-segment-button>
      <ion-segment-button value="history">
        <ion-label>History</ion-label>
      </ion-segment-button>
    </ion-segment>

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

      <div class="video" *ngFor="let item of usersCardsData">
        <div class="left">
          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/cards/credit-card.png)'"></div>

          <div class="text">
            <ion-label class="bold_text">{{item.description}} **** **** **** {{item.digits}}</ion-label>
            <ion-label class="grey_text">Added : {{item.added | date }}</ion-label>
          </div>
        </div>
        <div class="right">
            <ion-icon name="trash-outline" color="danger" (click)="deleteCard(item)"></ion-icon>
        </div>
      </div>

    </div>

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

      <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 myRecipientsData">
        <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/cards/bank.png)'"></div>

          <div class="text">
            <ion-label class="bold_text">{{item.recipient}}</ion-label>
            <ion-label class="grey_text">{{item.added | date}}</ion-label>
          </div>
        </div>
        <div class="right">
          <ion-icon name="trash-outline" color="danger"></ion-icon>
        </div>
      </div>

    </div>

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

    </div>

  </div>








<!--  <ion-label class="head_text">Choose payment methods</ion-label>-->

<!--  <div class="flex">-->
<!--    <div style="display: flex; align-items: center;">-->
<!--      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/paypal.png)'"></div>-->
<!--      <div class="text">-->
<!--        <ion-label class="bold_text">Paypal</ion-label>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div>-->
<!--      <ion-label class="connect">Connected</ion-label>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="flex">-->
<!--    <div style="display: flex; align-items: center;">-->
<!--      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/google.png)'"></div>-->
<!--      <div class="text">-->
<!--        <ion-label class="bold_text">Google Pay</ion-label>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div>-->
<!--      <ion-label class="connect">Connected</ion-label>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="flex">-->
<!--    <div style="display: flex; align-items: center;">-->
<!--      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/apple.png)'"></div>-->
<!--      <div class="text">-->
<!--        <ion-label class="bold_text">Apple Pay</ion-label>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div>-->
<!--      <ion-label class="connect">Connected</ion-label>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="flex">-->
<!--    <div style="display: flex; align-items: center;">-->
<!--      <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/visa.png)'"></div>-->
<!--      <div class="text">-->
<!--        <ion-label class="bold_text">**** **** **** 8998</ion-label>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div>-->
<!--      <ion-label class="connect">Connected</ion-label>-->
<!--    </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>-->