<div class="gifted-sub">

    <mat-toolbar>

        <mat-input-container class="search">

            <input matInput placeholder="Search" #input>

        </mat-input-container>

        <span class="spacer"></span>

    </mat-toolbar>

    <div class="spinner-container" *ngIf="dataSource.loading$ | async">

        <mat-spinner></mat-spinner>

    </div>

    <mat-table class="gifted-subs-table mat-elevation-z8" [dataSource]="dataSource"
               matSort matSortActive="time" matSortDirection="desc" matSortDisableClear>

        <ng-container matColumnDef="time">

            <mat-header-cell fxFlex="34%" *matHeaderCellDef mat-sort-header>Date</mat-header-cell>

            <mat-cell fxFlex="34%" *matCellDef="let giftedSub">{{giftedSub.time | date : 'yyyy-MM-dd'}}</mat-cell>

        </ng-container>

        <ng-container matColumnDef="giver">

            <mat-header-cell fxFlex="33%" *matHeaderCellDef mat-sort-header>Giver</mat-header-cell>

            <mat-cell fxFlex="33%" *matCellDef="let giftedSub">{{giftedSub.giver}}</mat-cell>

        </ng-container>

        <ng-container matColumnDef="receiver">

            <mat-header-cell fxFlex="33%" *matHeaderCellDef mat-sort-header>Receiver</mat-header-cell>

            <mat-cell fxFlex="33%" *matCellDef="let giftedSub">{{giftedSub.receiver}}</mat-cell>

        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

    </mat-table>

    <mat-paginator [length]="dataSource?.count$ | async" [pageSize]="20"
                   [pageSizeOptions]="[10, 20, 50, 100, 200]"></mat-paginator>

</div>