<span *ngIf="show" class="backToList">
    <a (click)="show = !show;" tooltip="Go to listing">Back to List</a>
    </span>

<div class="col-md-12 mb-4" *ngIf="!show">
    <tabset>
        <tab>
            <ng-template tabHeading> Role List</ng-template>
            <div class="row">
                <div class="col-sm-6 col-md-4" *ngFor="let role of listRole">
                    <div class="card">
                        <div class="card-header">
                            {{ role.role }}
                            <span class="badge badge-success float-right" title="Edit {{role.role}}" (click)="show = !show; roleId = role">Edit</span>
                        </div>
                        <div class="card-body display-container">
                            <div class="display-flex-container">
                                <label class="flex-item-name">role</label>
                                <span class="flex-item-value">{{ role.role }}</span>
                            </div>
                            <div class="display-flex-container">
                                <label class="flex-item-name">status</label>
                                <span class="flex-item-value">{{ role.status }}</span>
                            </div>
                            <div class="display-flex-container">
                                <label class="flex-item-name">description</label>
                                <span class="flex-item-value">{{ role.description }}</span>
                            </div>
                            <div class="display-flex-container">
                                <label class="flex-item-name">nav details</label>
                                <span class="flex-item-value"> 
                                    <ul>
                                        <li *ngFor="let nav of role.nav" [style.color]="nav.isActive == 1 ? 'green': 'gray'">
                                            {{nav.name}}
                                        </li>
                                    </ul>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </tab>
        <tab>
            <ng-template tabHeading> Add Role</ng-template>
            <div class="animated fadeIn">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <strong> Create New Role</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 <span class="danger">*</span></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 <span class="danger">*</span></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 <span class="danger">*</span></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> <span *ngIf="!nav.children"> Read/Write </span>
                                                <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)="addRoleMasterDetails()">Click</button>-->
                                    </div>
                                    <pre>{{checkedNavDetails | json}}</pre>
                                </form>
                            </div>
                            <div class="card-footer" align="right">
                                <button type="submit" class="btn btn-sm btn-success"><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>
        </tab>
    </tabset>
</div>
<app-edit-role *ngIf="show" [nav]="roleId"></app-edit-role>