<data-table [dataSource]="dataSource" itemsName="subscriptions" matSort class="responsive-material-table">
    <button mat-raised-button color="accent" headerActions [disabled]="loading$ | async" (click)="openCrupdateSubscriptionModal()" *ngIf="currentUser.hasPermission('subscriptions.create')" trans>Add</button>

    <ng-container matColumnDef="avatar">
        <mat-header-cell *matHeaderCellDef trans>Avatar</mat-header-cell>
        <mat-cell *matCellDef="let subscription"> <img *ngIf="subscription.user" [src]="subscription.user.avatar"> </mat-cell>
    </ng-container>

    <ng-container matColumnDef="user">
        <mat-header-cell *matHeaderCellDef trans>User</mat-header-cell>
        <mat-cell *matCellDef="let subscription" data-label="User: "> {{subscription?.user?.email}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="gateway">
        <mat-header-cell *matHeaderCellDef mat-sort-header trans>Gateway</mat-header-cell>
        <mat-cell *matCellDef="let subscription" data-label="Gateway: "> {{subscription.gateway}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="cancelled">
        <mat-header-cell *matHeaderCellDef trans>Cancelled</mat-header-cell>
        <mat-cell *matCellDef="let subscription" data-label="Cancelled: "> {{subscription.cancelled ? 'Yes' : 'No' }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="on_grace_period">
        <mat-header-cell *matHeaderCellDef trans>On Grace Period</mat-header-cell>
        <mat-cell *matCellDef="let subscription" class="hidden-on-mobile"> {{subscription.on_grace_period ? 'Yes' : 'No' }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="renews_at">
        <mat-header-cell *matHeaderCellDef mat-sort-header trans>Renews At</mat-header-cell>
        <mat-cell *matCellDef="let subscription" data-label="Renews: "> {{subscription.renews_at ? (subscription.renews_at | formattedDate) : '-'}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="ends_at">
        <mat-header-cell *matHeaderCellDef mat-sort-header trans>Ends At</mat-header-cell>
        <mat-cell *matCellDef="let subscription" data-label="Ends: "> {{subscription.ends_at ? (subscription.ends_at | formattedDate) : '-'}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="created_at">
        <mat-header-cell *matHeaderCellDef mat-sort-header trans>Subscribed At</mat-header-cell>
        <mat-cell *matCellDef="let subscription" data-label="Created: "> {{subscription.created_at | formattedDate}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="edit">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let subscription">
            <ng-container *ngIf="currentUser.hasPermission('subscriptions.delete')">
                <button mat-icon-button (click)="openCrupdateSubscriptionModal(subscription)" [matTooltip]="'Edit' | trans"><mat-icon svgIcon="edit"></mat-icon></button>
                <button mat-icon-button (click)="maybeCancelSubscription(subscription)" [disabled]="subscription.cancelled" [matTooltip]="'Cancel/Suspend' | trans"><mat-icon svgIcon="pause"></mat-icon></button>
                <button mat-icon-button (click)="maybeDeleteSubscription(subscription)" [matTooltip]="'Delete' | trans"><mat-icon svgIcon="delete"></mat-icon></button>
            </ng-container>
        </mat-cell>
    </ng-container>
</data-table>