<div class="main">
  <div class="row" style="text-align: center; font-size: 20px; font-weight: 400;"> 
    <div class="col-12">
      <P>Dealer Permission</P>
    </div>
  </div>
  <div class="form-group row m-2">
            <label for="options" class="ml-3 mr-4">User Setting :</label>
            <div  class="mr-3" *ngFor="let option of UserOptions">
                <label>
                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
                        (change)="updateCheckedOptions(option.name, !option.value,'user')" />
                    {{option.name}}
                </label>
            </div>
        </div>
        <div class="form-group row m-2">
            <label for="options" class="ml-3 mr-4">Device Setting :</label>
            <div class="mr-3" *ngFor="let option of DeviceOptions">
                <label>
                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
                        (change)="updateCheckedOptions(option.name, !option.value,'device')" />
                    {{option.name}}
                </label>
            </div>
        </div>

  <div class="row"> 
    <div class="col-12" style="text-align: center;">
      <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;margin-right: 5px;" md-raised-button (click)="save()">{{'Save' | translate}}</button>
      <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="cancel()">{{'CANCEL' | translate}}</button>
    </div>
  </div>
</div>
