<div class="content">
  <div class="default-header">
    <div class="row align-items-center">
      <a
        mat-icon-button
        matTooltip="Back to role management"
        matTooltipClass="custom-tooltip"
        [routerLink]="['/controller', controller.id, 'management', 'roles']">
        <mat-icon aria-label="Back to role management">keyboard_arrow_left</mat-icon>
      </a>
      <h1 class="col">Role {{($role | async)?.name}}</h1>
    </div>
    <div class="main">
      <div class="details">
        <form [formGroup]="editRoleForm">
          <div>
            <mat-form-field>
              <mat-label>Role name:</mat-label>
              <input matInput type="text" formControlName="rolename">
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Description:</mat-label>
              <input matInput type="text" formControlName="description">
            </mat-form-field>
          </div>
        </form>
        <div>Creation date:   {{($role | async)?.created_at}}</div>
        <div>Last update Date:   {{($role | async)?.updated_at}}</div>
        <div>UUID:   {{($role | async)?.role_id}}</div>
        <div>
          <mat-checkbox [checked]="($role | async)?.is_builtin" disabled>Is built-in</mat-checkbox>
        </div>
        <div mat-dialog-actions class="button-div">
          <button mat-button (click)="onUpdate()" tabindex="2" mat-raised-button color="primary"
                  [disabled]="(!(editRoleForm.valueChanges | async) && editRoleForm.valid) || ($role | async)?.is_builtin">

            Update Role
          </button>
        </div>
      </div>
      <mat-divider [vertical]="true"></mat-divider>
      <app-privilege
        [disable]="($role | async)?.is_builtin"
        [ownedPrivilege]="$ownedPrivilegesId | async"
        [privileges]="privileges | async"
        (update)="onPrivilegesUpdate($event)"></app-privilege>
    </div>
  </div>
</div>
