<mat-card>
	<mat-card-content>
    <div fxLayout="row" fxLayoutAlign="left stretch" fxLayoutGap="30px">
      <button id="schedulerControllerBtn" mat-raised-button class="btn btn-default large-btn" (click)="startOrPause()">
        <span *ngIf = "scheduler?.status === 'RUNNING'">
          <i class="fas fa-pause red"></i>
        </span>
        <span *ngIf = "scheduler?.status === 'STOPPED' || scheduler?.status === 'PAUSED'">
          <i class="fas fa-play green"></i>
        </span>
      </button>
      <div fxLayout="column center">
        <mat-card-subtitle style="margin: auto;"><b>SCHEDULER</b></mat-card-subtitle>
      </div>
      <mat-divider [vertical]="true"></mat-divider>
      <div fxLayout="column" class="justify-space-between">
        <div><label>Name</label></div>
        <div><span id="scheduler-name">{{scheduler?.name}}</span></div>
      </div>
      <div fxLayout="column" class="justify-space-between">
        <div><label>Instance ID</label></div>
        <div><span id="scheduler-instance">{{scheduler?.instanceId}}</span></div>
      </div>
    </div>
	</mat-card-content>
</mat-card>
