<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<form class="mt-3 mb-3" [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div class="form-group row col-md-8">
        <div class="col-md-2 col-form-label">{{'form.edit' |translate}}&nbsp;<span
                class="fas fa-edit"></span></div>
        <div class="col-md-6">
            <input class="form-check-input" type="checkbox" [value]="editMode" [checked]="editMode"
                   (change)="editMode=!editMode"
            >
        </div>
    </div>
    <div class="form-group row col-md-8">
        <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.id' |translate}}</label>
        <div class="col-md-6">
            <input type="text" formControlName="id" id="id" class="form-control-plaintext"
                   [attr.readonly]="true">
        </div>
    </div>
    <div class="form-group row col-md-8">
        <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.name' |translate}}</label>
        <div class="col-md-6">
            <input type="text" formControlName="name" id="name"
                   class="form-control-plaintext"
                   [attr.readonly]="true">
        </div>
    </div>
    <div class="form-group row col-md-8">
        <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.description' |translate}}</label>
        <div class="col-md-6">
            <input type="text" formControlName="description" id="description"
                   [ngClass]="valid('description')"
                   [attr.readonly]="editMode?null:'true'">
        </div>
    </div>
    <div class="form-group row col-md-8">
        <label class="col-md-2 col-form-label" for="id">{{'roles.attributes.resource' |translate}}</label>
        <div class="col-md-6">
            <input type="text" formControlName="resource" id="resource" class="form-control-plaintext"
                   [attr.readonly]="true">
        </div>
    </div>
    <div class="form-group row col-md-8">
        <div class="col-md-2"></div>
        <div class="col-md-4">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" formControlName="assignable"
                       id="assignable" [attr.disabled]="true">
                <label class="form-check-label " for="assignable">
                    {{'roles.attributes.assignable'|translate}}
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" formControlName="template_instance"
                       id="template_instance" [attr.disabled]="true">
                <label class="form-check-label " for="template_instance">
                    {{'roles.attributes.template_instance'|translate}}
                </label>
            </div>
        </div>
        <div class="col-md-3" *ngIf="editMode">
            <button class="btn btn-primary" type="submit"
                    [disabled]="userForm.invalid || !userForm.dirty">{{'form.button.save'|translate}}</button>
        </div>
    </div>
</form>
<hr/>
<ngb-accordion activeIds="">
    <ngb-panel id="parents">
        <ng-template ngbPanelHeader let-opened="opened">
            <div class="d-flex align-items-center justify-content-between">
                <button ngbPanelToggle class="btn btn-link text-left shadow-none">
                    <h3>{{'roles.edit.parents'|translate}}</h3></button>
                <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container>
                <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container>
            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            <ng-container *ngIf="editRole?.parents.length>0">
                <ul class="list-group" *ngFor="let parentRole of editRole?.parents">
                    <li class="list-group-item"><a routerLink="../{{parentRole?.id}}">{{parentRole?.name}}</a></li>
                </ul>
            </ng-container>
        </ng-template>
    </ngb-panel>
    <ngb-panel id="children">
        <ng-template ngbPanelHeader let-opened="opened">
            <div class="d-flex align-items-center justify-content-between">
                <button ngbPanelToggle class="btn btn-link text-left shadow-none">
                    <h3>{{'roles.edit.children'|translate}}</h3></button>
                <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container>
                <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container>
            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            <ng-container *ngIf="editRole?.children.length>0">
                <ul class="list-group" *ngFor="let childRole of editRole?.children">
                    <li class="list-group-item"><a routerLink="../{{childRole?.id}}">{{childRole?.name}}</a></li>
                </ul>
            </ng-container>
        </ng-template>
    </ngb-panel>

    <ngb-panel id="permissions">
        <ng-template ngbPanelHeader let-opened="opened">
            <div class="d-flex align-items-center justify-content-between">

                <button ngbPanelToggle class="btn btn-link text-left shadow-none">
                    <h3>{{'roles.edit.permissions'|translate}}</h3></button>
                <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container>
                <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container>
            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            <ng-container *ngIf="editRole">
                <table class="table">
                    <thead>
                    <tr>
                        <th>{{'permissions.attributes.permission'|translate}}</th>
                        <th>{{'permissions.attributes.operation'|translate}}</th>
                        <th>{{'permissions.attributes.resource'|translate}}</th>
                    </tr>
                    </thead>
                    <tbody *ngFor="let perm of editRole.permissions">
                    <tr>
                        <td>{{perm.name}}</td>
                        <td>{{perm.operation.name}}</td>
                        <td>{{perm.resource.identifier}}</td>
                    </tr>
                    </tbody>

                </table>
            </ng-container>
        </ng-template>
    </ngb-panel>

    <ngb-panel>
        <ng-template ngbPanelHeader let-opened="opened">
            <div class="d-flex align-items-center justify-content-between">
                <button ngbPanelToggle class="btn btn-link text-left shadow-none">
                    <h3>{{'roles.edit.users'|translate}}</h3></button>
                <ng-container *ngIf="!opened"><i class="fa fa-eye-slash"></i></ng-container>
                <ng-container *ngIf="opened"><i class="fa fa-eye"></i></ng-container>
            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            <h4>{{'roles.edit.usersParents'|translate}}</h4>
            <app-paginated-entities [service]="roleUserParentService" pageSize="5" [(sortField)]="userParentSortField"
                                    [(sortOrder)]="userParentSortOrder" [displayControlsIfSinglePage]="false"
                                    [id]="'userParentSection'"
                                    #userParentSection>

                <ng-container *ngIf="userParentSection.items$ |async as userParentItemLoader">
                    <ng-template [ngIf]="userParentItemLoader.loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </ng-template>
                </ng-container>
                <ng-container *ngIf="userParentSection.items$ |stripLoading|async as parentUserItem">
                    <table class="table table-striped table-bordered">
                        <thead class="thead-light">
                        <tr sorted [sortFieldEmitter]="userParentSection.sortFieldChange"
                            [sortOrderEmitter]="userParentSection.sortOrderChange"
                            [toggleObserver]="userParentSection">
                            <app-th-sorted [fieldArray]="['user_id']"
                                           contentText="users.attributes.user_id"></app-th-sorted>
                            <app-th-sorted [fieldArray]="['full_name']"
                                           contentText="users.attributes.full_name"></app-th-sorted>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let parentUser  of parentUserItem.data">
                            <td><span data-toggle="tooltip" placement="left"
                                      ngbTooltip="{{parentUser.id}}">{{parentUser.user_id}}</span>
                            </td>
                            <td>{{parentUser.full_name}}</td>
                        </tr>
                        </tbody>
                    </table>
                </ng-container>
            </app-paginated-entities>
            <hr/>
            <h4>{{'roles.edit.usersInstance'|translate}}</h4>
            <app-paginated-entities [service]="roleUserService" pageSize="5" [(sortField)]="userSortField"
                                    [id]="'userSection'"
                                    [(sortOrder)]="userSortOrder"
                                    [displayIfEmpty]="false" [displayKeyIfEmpty]="'roles.edit.noUsersAssigned'"
                                    [displayControlsIfSinglePage]="false"
                                    #userSection>

                <ng-container *ngIf="userSection.items$ |async as userItemLoader">
                    <ng-template [ngIf]="userItemLoader.loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </ng-template>
                </ng-container>
                <ng-container *ngIf="userSection.items$ |stripLoading|async as userItem">
                    <table class="table table-striped table-bordered">
                        <thead class="thead-light">
                        <tr sorted [sortFieldEmitter]="userSection.sortFieldChange"
                            [sortOrderEmitter]="userSection.sortOrderChange"
                            [toggleObserver]="userSection">
                            <app-th-sorted [fieldArray]="['user_id']"
                                           contentText="users.attributes.user_id"></app-th-sorted>
                            <app-th-sorted [fieldArray]="['full_name']"
                                           contentText="users.attributes.full_name"></app-th-sorted>
                            <th>{{'headers.action'|translate}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let user  of userItem.data">
                            <td><span data-toggle="tooltip" placement="left"
                                      ngbTooltip="{{user.id}}">{{user.user_id}}</span>
                            </td>
                            <td>{{user.full_name}}</td>
                            <td><a href="javascript: void(0)" (click)="unassignUser(user.user_id)"><span
                                    class="fas fa-user-minus"></span></a></td>
                        </tr>
                        </tbody>
                    </table>
                </ng-container>
            </app-paginated-entities>
            <hr/>
            <form class="mt-2">
                <ng-template #userResultTemplate let-r="result" let-t="term">
                    <ngb-highlight [result]="r.user_id + ' - ' + r.full_name" [term]="t"></ngb-highlight>
                </ng-template>
                <div class="form-group">
                    <label for="typeahead-http">{{'roles.edit.assignUserSearch'|translate}}</label>
                    <input id="typeahead-http" type="text" class="form-control col-md-2"
                           name="userSearchField"
                           [class.is-invalid]="userSearchFailed" [resultTemplate]="userResultTemplate"
                           [inputFormatter]="getUserId"
                           [placement]="'top'"
                           [(ngModel)]="userSearchModel" [ngbTypeahead]="searchUser" placeholder="User Search"/>
                    <small *ngIf="userSearching"
                           class="form-text text-muted">{{'form.searching'  |translate}}</small>
                    <div class="invalid-feedback"
                         *ngIf="userSearchFailed">{{'roles.edit.userSearchFailed'|translate}}</div>
                </div>
                <button class="btn btn-primary" (click)="assignUserRole()">{{'roles.edit.assignButton'|translate}}</button>
            </form>

        </ng-template>
        <div *ngIf="success">
            Success
        </div>
        <div *ngIf="error">
            <div>Error {{errorResult.error_messages}}</div>
        </div>
    </ngb-panel>

</ngb-accordion>