<div class="pagemain">
    <div class="main-pagemain">
        <div class="pagetitle">
            <h3>Payment Transactions</h3>
        </div>
        <div class="search-wrap">
            <div class="search-icon">
                <input placeholder="Search by Name, Email, Amount..." [(ngModel)]="Search" autocomplete="off"
                    (keyup)="filter()" name="search" />
                <span class="material-icons">search</span>
            </div>
        </div>
    </div>
    <div class="pagesection">
        <div class="mat-elevation-z8">
            <table mat-table [dataSource]="dataSource" matSort style="border-spacing: 0 10px">
                <ng-container matColumnDef="srno">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
                    <td mat-cell *matCellDef="let element"><span title="{{ element.srno }}">{{ element.srno }}</span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="email">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
                    <td mat-cell *matCellDef="let element"><span title="{{ element.email }}">{{
                            element.email }}</span></td>
                </ng-container>
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
                    <td mat-cell *matCellDef="let element"><span title="{{ element.name }}">{{ element.name
                            }}</span></td>
                </ng-container>
                <ng-container matColumnDef="last_name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
                    <td mat-cell *matCellDef="let element"><span title="{{ element.last_name }}">{{ element.last_name
                            }}</span></td>
                </ng-container>
                <ng-container matColumnDef="amount">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        Amount
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span title="{{ element.amount }}">{{ element.amount }}</span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="product_purchased">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        Purchased Plan
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span title="{{ element.product_purchased }}">{{ element.product_purchased }}</span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="createdAt">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
                        Date
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span title="{{ element.createdAt }}">{{ element.createdAt| date: "medium" }}</span>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>
        </div>
    </div>
    <div class="page-footer">
        <mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" *ngIf="pagination"
            [length]="dataSource.data ? dataSource.data.length : 0" [pageSize]="10"
            [pageSizeOptions]="[10, 20, 50, 100, 500]">
        </mat-paginator>
    </div>
</div>
<ngx-spinner bdColor="#00041aa6" size="default" color="##d7779b"
    template="<img src='../../../assets/images/loading.gif' class='loading-indicator'/>" [fullScreen]="true">
</ngx-spinner>