<mat-card style="margin:0.5em;">
  <mat-card-header>
    <mat-card-title>
      <div>
        <button *ngIf="application.controls['status'].value === 'OPEN'" mat-flat-button disabled
                style="background-color: antiquewhite;  height: 30px;width: 50px; font-size: 10pt">
          {{'application.open' | translate}}
        </button>
        <button *ngIf="application.controls['status'].value === 'SEEN'" mat-flat-button disabled
                style="background-color: lightgoldenrodyellow; height: 30px; width: 50px;font-size: 10pt">
          {{'application.seen' | translate}}
        </button>
        <button *ngIf="application.controls['status'].value === 'APPROVED'" mat-flat-button disabled
                style="background-color: darkseagreen; height: 30px; width: 50px; font-size: 10pt">
          {{'application.approved' | translate}}
        </button>
        <button *ngIf="application.controls['status'].value === 'DECLINED'" mat-flat-button disabled
                style="height: 30px; width: 50px; font-size: 10pt; background-color: indianred">
          {{'application.declined' | translate}}
        </button>
        <button *ngIf="application.controls['status'].value === 'CLOSED'" mat-flat-button disabled
                style="height: 30px; width: 50px; font-size: 10pt">
          {{'application.closed' | translate}}
        </button>
      </div>
      <div style="margin-left: 15px">
        {{application.controls['name'].value}}
      </div>

    </mat-card-title>
    <mat-card-subtitle style="margin-left: 15px">
      {{getApplicationDate()}}
    </mat-card-subtitle>

    <span fxFlex></span>

    <div>
      <button mat-icon-button
              (click)="deleteApplication(); $event.stopPropagation();">
        <mat-icon color="warn">clear</mat-icon>
      </button>
    </div>

  </mat-card-header>
</mat-card>
