<ion-header mode="ios" class="ion-no-border">
    <ion-toolbar>
        <!--    <ion-buttons slot="end">-->
        <!--      <ion-button>-->
        <!--        <ion-icon name="search-outline"></ion-icon>-->
        <!--      </ion-button>-->
        <!--    </ion-buttons>-->
        <ion-title>Wallet</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
<!--    <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/p2.jpg)'">-->
<!--        <div class="ion-padding">-->
<!--            <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
<!--        </div>-->
<!--    </div>-->
    <div class="boxed_contents">

<!--        <ion-card *ngFor="let item of walletData; let i = index">-->
<!--            <ion-card-header>-->
<!--                <ion-card-title>{{item.description}}</ion-card-title>-->
<!--                <ion-card-subtitle> <span class="balance_line">Balance {{item.amount*0.01 | number : '1.2-2'}} </span></ion-card-subtitle>-->
<!--            </ion-card-header>-->

<!--            <ion-card-content>-->
<!--                <ion-grid>-->
<!--                    <ion-row>-->
<!--                        <ion-col>-->
<!--                           <div *ngIf="item.action_type == 'AC_AD_WR_FUND' " >-->
<!--                               <ion-button color="secondary" expand="block" (click)="startRedeem(item)">Redeem</ion-button>-->
<!--                           </div>-->
<!--                        </ion-col>-->
<!--                        <ion-col></ion-col>-->
<!--                        <ion-col>-->
<!--                        &lt;!&ndash;                                                <ion-button size="small" expand="block">Add Credit</ion-button>&ndash;&gt;-->
<!--                        </ion-col>-->
<!--                    </ion-row>-->
<!--                </ion-grid>-->
<!--            </ion-card-content>-->
<!--        </ion-card>-->
        <div class="ion-padding">
            <div class="lesson">
<!--                <div class="flex">-->
<!--                    <ion-label class="bold">Wallet(s)</ion-label>-->
<!--                    &lt;!&ndash;                <ion-label class="color">.</ion-label>&ndash;&gt;-->
<!--                </div>-->

                <ion-accordion-group>
                    <ion-accordion *ngFor="let item of walletData" value="{{item.wallet_uid}}">
                        <ion-item slot="header" color="light">
                            <ion-label><span style="font-weight: bolder; color: #8b198e">{{item.description}}</span> Balance {{item.amount*0.01 | number : '1.2-2'}}</ion-label>
                        </ion-item>
                        <div class="ion-padding acc-item" slot="content">
                            <div class="video wallets">
                                <div class="left">
                                    <div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/currency/'+item.code.toLowerCase()+'.svg)'"></div>
                                </div>
                                <div class="text">
                                    <ion-label class="bold_text">{{item.description}}</ion-label>
                                    <ion-label class="grey_text"><span class="balance_line">Balance {{item.amount*0.01 | number : '1.2-2'}} </span></ion-label>
                                    <ion-grid>
                                        <ion-row>
                                            <ion-col></ion-col>
                                            <ion-col>
                                                <ion-button size="small"  shape="round" expand="block" (click)="addCredit(item)">Add Credit</ion-button>
                                            </ion-col>

                                            <ion-col>
                                                <div *ngIf="item.action_type == 'AC_AD_WR_FUND' " >
                                                    <ion-button color="success" shape="round" size="small" expand="block" (click)="startRedeem(item)">Redeem</ion-button>
                                                </div>
                                            </ion-col>


                                        </ion-row>
                                    </ion-grid>
                                </div>
                            </div>


                        </div>
                    </ion-accordion>
<!--                    <ion-accordion value="second">-->
<!--                        <ion-item slot="header" color="light">-->
<!--                            <ion-label>Second Accordion</ion-label>-->
<!--                        </ion-item>-->
<!--                        <div class="ion-padding" slot="content">Second Content</div>-->
<!--                    </ion-accordion>-->
<!--                    <ion-accordion value="third">-->
<!--                        <ion-item slot="header" color="light">-->
<!--                            <ion-label>Third Accordion</ion-label>-->
<!--                        </ion-item>-->
<!--                        <div class="ion-padding" slot="content">Third Content</div>-->
<!--                    </ion-accordion>-->
                </ion-accordion-group>


<!--                <div class="video wallets" *ngFor="let item of walletData">-->
<!--                    <div class="left">-->
<!--                        <div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/currency/'+item.code.toLowerCase()+'.svg)'"></div>-->
<!--                    </div>-->
<!--                        <div class="text">-->
<!--                            <ion-label class="bold_text">{{item.description}}</ion-label>-->
<!--                            <ion-label class="grey_text"><span class="balance_line">Balance {{item.amount*0.01 | number : '1.2-2'}} </span></ion-label>-->
<!--                            <ion-grid>-->
<!--                                <ion-row>-->
<!--                                    <ion-col></ion-col>-->
<!--                                    <ion-col>-->
<!--                                        <ion-button size="small"  shape="round" expand="block" (click)="addCredit(item)">Add Credit</ion-button>-->
<!--                                    </ion-col>-->

<!--                                    <ion-col>-->
<!--                                        <div *ngIf="item.action_type == 'AC_AD_WR_FUND' " >-->
<!--                                            <ion-button color="success" shape="round" size="small" expand="block" (click)="startRedeem(item)">Redeem</ion-button>-->
<!--                                        </div>-->
<!--                                    </ion-col>-->


<!--                                </ion-row>-->
<!--                            </ion-grid>-->
<!--                        </div>-->
<!--                </div>-->


            </div>

            <div class="lesson">
                <div class="flex">
                    <ion-label class="bold">Recent Transactions</ion-label>
                    <!--                <ion-label class="color">.</ion-label>-->
                </div>
                <div class="video" *ngFor="let item of paymentData">
                    <div class="left">
                        <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/money-cycle.svg)'"></div>

                        <div class="text">
                            <!--            <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
                            <!--            <ion-label class="grey_text">10 mins</ion-label>-->

                            <div class="bold_text" [innerHTML]="item.recipient"></div>
                            <ion-label class="grey_text">{{item.confirmation}}- {{item.amount}}</ion-label>
                            <ion-label class="grey_text">{{item.trx_date | date}} - {{item.status}}</ion-label>


                        </div>
                    </div>
                    <div class="right">
                        <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
                    </div>
                </div>
            </div>
        </div>


<!--        <ion-list>-->
<!--            <ion-list-header>-->
<!--                <ion-label>Recent Transactions</ion-label>-->
<!--            </ion-list-header>-->


<!--            <ion-item>-->
<!--                <ion-label>-->

<!--                    <div class="bg_white" *ngFor="let item of paymentData;">-->
<!--                        <div class="list">-->
<!--                            <div class="detail">-->
<!--                                &lt;!&ndash;              <div dangerouslySetInnerHTML={{__html: item.recipient}}></div>&ndash;&gt;-->
<!--                                &lt;!&ndash;              <ion-label class="name">{{item.recipient}}</ion-label>&ndash;&gt;-->
<!--                                <div class="bold_text" [innerHTML]="item.recipient"></div>-->
<!--                                <ion-label class="grey_text">{{item.confirmation}}- {{item.amount}}</ion-label>-->

<!--                            </div>-->
<!--                        </div>-->
<!--                        &lt;!&ndash;          <ion-label class="receipt" (click)="onReceipt(item)"><ion-icon name="chevron-forward-outline"></ion-icon></ion-label>&ndash;&gt;-->
<!--                        <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!--                    </div>-->

<!--                </ion-label>-->
<!--            </ion-item>-->
<!--        </ion-list>-->
    </div>
</ion-content>



<!--<div class="left">-->
<!--    <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/money-cycle.svg)'"></div>-->

<!--    <div class="text">-->
<!--        &lt;!&ndash;            <ion-label class="bold_text">Why Using Figma ?</ion-label>&ndash;&gt;-->
<!--        &lt;!&ndash;            <ion-label class="grey_text">10 mins</ion-label>&ndash;&gt;-->

<!--        <div class="bold_text" [innerHTML]="item.recipient"></div>-->
<!--        <ion-label class="grey_text">{{item.confirmation}}- {{item.amount}}</ion-label>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="right">-->
<!--    <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!--</div>-->