<mat-card>
    <mat-card-content>
        <p>{{'vouchers.info' | i18n}}</p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-raised-button color="primary" (click)="registration()" [disabled]="!hasRegistration">
            {{'vouchers.registration' | i18n}}
        </button>
        <button mat-raised-button color="accent" (click)="addon()">
            {{'vouchers.add-on' | i18n}}
        </button>
    </mat-card-actions>
</mat-card>

<div *ngIf="vouchers && vouchers[0]">
    <h3>{{'vouchers.temp' | i18n}}</h3>
    <p>{{'vouchers.temp.info' | i18n}}</p>
    <table mat-table [dataSource]="voucherSource">
        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef> {{'voucher.type' | i18n}} </th>
            <td mat-cell *matCellDef="let voucher">{{voucher.type}}</td>
        </ng-container>

        <ng-container matColumnDef="code">
            <th mat-header-cell *matHeaderCellDef> {{'voucher.code' | i18n}} </th>
            <td mat-cell *matCellDef="let voucher">{{voucher.code}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="voucherColumns"></tr>
        <tr mat-row *matRowDef="let myRowData; columns: voucherColumns"></tr>
    </table>
</div>