<div id="controls">
    <material-button id="run" (click)="onStartClicked()">
        <span [ngSwitch]="engine.running">
            <i *ngSwitchCase="false" class="fas fa-play"></i>
            <i *ngSwitchCase="true" class="fas fa-stop"></i>
        </span>
    </material-button>
    <material-button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></material-button>
    <material-button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></material-button>
    <material-button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></material-button>
    <material-button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></material-button>
    <i class="fas fa-clock">{{simSpeed}}</i> <material-slider [max]="10" [min]="1" [(value)]="simSpeed" ></material-slider>
    <material-button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </material-button>
</div>