
<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <strong>Edit Role Details</strong>
        </div>
        <div class="card-body">
          <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
           
            <div class="form-group row">
              <label class="col-md-3 col-form-label" for="text-input">Name of the Role</label>
              <div class="col-md-9">
                <input type="text" id="text-input" name="text-input" class="form-control" [(ngModel)]="roleName" placeholder="Text">
                <span class="help-block">This is a help text</span>
              </div>
            </div>
         
            <div class="form-group row">
              <label class="col-md-3 col-form-label" for="textarea-input">Role Description</label>
              <div class="col-md-9">
                <textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" [(ngModel)]="roleDescription" placeholder="Content.."></textarea>
              </div>
            </div>
            
            <div class="form-group row">
              <label class="col-md-3 col-form-label">Option Menu's</label>
              <div class="col-md-9 col-form-label">
                <div class="form-check" *ngFor="let nav of navListDetails; let i = index">
                  <input class="form-check-input" [checked]="nav.isActive" [disabled]="nav.isDisabled" type="checkbox" value="option1" (change)="nav.isActive = $event.target.checked" (click)="checkChild(i, nav ,$event.target.checked)" id="{{nav.id}}">
                  <label class="form-check-label" for="{{nav.id}}">
                    {{nav.name | uppercase}}
                  </label>
                  <div *ngIf="nav.children && nav.isActive" class="form-group row">
                    <!--<label class="col-md-3 col-form-label">Sub Menu's</label>-->
                    <div class="col-md-12 col-form-label">
                      <div class="form-check form-check-inline mr-1" *ngFor="let child of nav.children">
                        <input class="form-check-input" [checked]="child.isActive" [disabled]="child.isDisabled" type="checkbox" id="{{child.id}}" value="option1" (change)="child.isActive = $event.target.checked">
                        <label class="form-check-label" for="{{child.id}}">{{child.name | uppercase}}</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--<button (click)="updateRoleMaster()" tooltip="update">Click</button>-->
            </div>
            <pre>{{checkedNavDetails | json}}</pre>
          </form>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
          <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
</div>