<div class="fl-content fl-content-min-height" layoutDirection="column">
  <ng-container *ngIf="hasUsers; else noUsers">
    <div class="fl-margin-bottom"
         *ngIf="selectedUser && selectedUser.user_groups && selectedUser.user_groups.length > 0">
      <h3 i18n>Note!</h3>
      <p i18n>
        One user can be included in one or more groups. The final permissions are calculated based on the values of all
        permissions that are associated with the user, including those from the user groups. Effective permissions are
        represented by the disabled checkboxes.
      </p>
      <h3 *ngIf="selectedUser && !selectedUser.user_groups.length" i18n>
        User
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), selectedUser.id]">
          {{selectedUser.email}}
        </a>
        is not included in any group.
      </h3>
      <div>
        <h3 i18n>
          User
          <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), selectedUser.id]">
            {{selectedUser.email}}
          </a>
          is part of the following groups:
        </h3>
        <table>
          <tbody>
          <tr *ngFor="let group of selectedUser.user_groups">
            <td>
              <a [routerLink]="config.getPanelUrl('clients-users/user-groups/' + group.id)" class="active-link">
                {{group.name || group.id}}
              </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <h2 class="fl-heading-md" i18n>Select a user to manage permissions</h2>
    <div layoutDirection="column">
      <form appFormSubmit (ngSubmit)="saveUserPermissions()"
            [formGroup]="userAuthorizationForm" layoutDirection="column">
        <app-user-autocomplete [control]="userAuthorizationForm.controls.user"></app-user-autocomplete>
      </form>
      <div *ngIf="selectedUser && selectedUser.is_superuser">
        <p i18n>The user you selected is a superuser and already has all permissions.</p>
        <p i18n>If you want to manage it's permissions you need to remove it's superuser status from user's details
          page.</p>
      </div>
      <mat-checkbox *ngIf="showPermissionOptions()"
                    [color]="'primary'" [checked]="userPermissions.implicitly_granted"
                    (change)="userPermissions.implicitly_granted = !userPermissions.implicitly_granted"
                    class="fl-grant-permissions-checkbox" i18n>
        Grant new permissions implicitly
      </mat-checkbox>
      <div appFlex="100" *ngIf="showPermissionOptions()">
        <mat-tab-group>
          <mat-tab *ngFor="let panelPermissions of userPermissions.permissions | keyvalue"
                   [label]="userPermissions.panel_display_names[panelPermissions.key]">
            <app-permissions-selector [permissions]="panelPermissions.value"
                                      [effectivePermissions]="userPermissions.effective_permissions[panelPermissions.key]">
            </app-permissions-selector>
          </mat-tab>
        </mat-tab-group>
      </div>
    </div>
    <div layoutDirection="row" layoutAlign="end" class="fl-margin-top" *ngIf="userPermissions">
      <button mat-button (click)="saveUserPermissions()" color="primary" i18n>Save permissions</button>
    </div>
  </ng-container>
  <ng-template #noUsers>
    <p class="fl-detail" i18n>No users to manage permissions for.</p>
  </ng-template>
</div>
