<div fxLayout="row" fxLayoutGap="30px" style="padding: 2rem 3rem 0">
  <button mat-stroked-button routerLink="./centralized-security-management">
    Centralized Security Management
  </button>
  <button mat-stroked-button routerLink="./security-system-details">
    Security System Details
  </button>
</div>


<mat-card class="sound-group">
  <mat-card-header>
    <mat-card-title>WHISTLE TIME: {{whistle.time}}s</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="volume-group">
      <app-slider-range
        [value]="whistle.time"
        [icon]="'access_alarm'"
        (valueChange)="whistle.time = $event"
      ></app-slider-range>
    </div>
  </mat-card-content>
</mat-card>


<mat-card class="sound-group">
  <mat-card-header>
    <mat-card-title>24-HOUR ZONE ALARM TIME: {{alarm.time}}s</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="volume-group">
      <app-slider-range
        [value]="alarm.time"
        [icon]="'access_alarm'"
        (valueChange)="alarm.time = $event"
      ></app-slider-range>
    </div>

  </mat-card-content>
</mat-card>
