<div class="container">
    <div class="flex column fill center middle">
        <mat-card class="warn box">
            <mat-card-header>
                <mat-card-title>503</mat-card-title>
                <mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <p>
                    {{'service-unavailable.text' | i18n}}
                </p>
            </mat-card-content>
            <mat-card-actions>
                <a mat-raised-button color="primary" (click)="retry()">
                    {{'service-unavailable.retry' | i18n}}
                </a>
            </mat-card-actions>
        </mat-card>
    </div>
</div>