<div layoutDirection="column">
  <div appFlex="100" layoutDirection="row" appLayoutGap="10px">
    <mat-form-field class="fl-margin-top-medium">
      <mat-label i18n>Search permissions...</mat-label>
      <input matInput [(ngModel)]="searchValue" (ngModelChange)="triggerSearch(searchValue)"
             type="text" placeholder="Search permissions..." i18n-placeholder>
      <button mat-icon-button matSuffix (click)="search(searchValue)">
        <mat-icon>search</mat-icon>
      </button>
    </mat-form-field>

    <div class="fl-margin-top">
      <a mat-icon-button [attr.fl-tooltip]="selectAllTooltip"
         fl-tooltip-direction="down" (click)="selectAll()">
        <mat-icon>check_circle</mat-icon>
      </a>
      <a mat-icon-button [attr.fl-tooltip]="deselectAllTooltip"
         fl-tooltip-direction="down" (click)="deselectAll()">
        <mat-icon>highlight_off</mat-icon>
      </a>
    </div>
  </div>
  <div appFlex="100" layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
    <div layoutDirection="column" appFlex="20">
      <mat-selection-list [multiple]="false">
        <mat-list-option color="primary" *ngFor="let category of permissions | keyvalue" [value]="category.key"
                         [selected]="category.key === activeCategory" (click)="categoryChanged(category.key)">
          {{category.key}}
        </mat-list-option>
      </mat-selection-list>
    </div>
    <div layoutDirection="column" appFlex="75">
      <div appFlex="100" layoutDirection="row" layoutDirection-lt-md="column">
        <table class="fl-grid fl-table-auto-height permissions-table" appFlex="50" ltMdFlex="100" layoutDirection="column">
          <ng-container *ngFor="let perm of permissions[activeCategory]; let i = index">
            <tbody *ngIf="i <= (permissions[activeCategory].length / 2)">
            <tr class="v-middle">
              <td [attr.fl-tooltip]="perm.description" (click)="toggleCheckbox(perm)"
                  appFlex="{{effectivePermissions ? 80 : 85}}"
                  class="fl-permissions-display-name fl-cursor-pointer">
                <p>{{perm.display_name }}</p>
              </td>
              <td appFlex="5">
                <mat-checkbox [(ngModel)]="perm.granted" [color]="'primary'" class="fl-permissions-checkboxes"
                              [disabled]="disabled"></mat-checkbox>
              </td>
              <td *ngIf="effectivePermissions" appFlex="5" class="no-overflow-hidden">
                <span *ngIf="getEffectivePermission(perm.name); else noEffectivePerm">
                  <mat-icon class="effective-perm-icon" fl-tooltip="Effective permission" i18n-fl-tooltip>
                    check_box
                  </mat-icon>
                </span>
                <ng-template #noEffectivePerm>
                  <mat-icon class="effective-perm-icon" fl-tooltip="Effective permission" i18n-fl-tooltip>
                    check_box_outline_blank
                  </mat-icon>
                </ng-template>
              </td>
            </tr>
            </tbody>
          </ng-container>
        </table>
        <table class="fl-grid fl-table-auto-height permissions-table" appFlex="50" ltMdFlex="100" layoutDirection="column">
          <ng-container *ngFor="let perm of permissions[activeCategory]; let i = index">
            <tbody *ngIf="i > (permissions[activeCategory].length / 2)">
            <tr class="v-middle">
              <td [attr.fl-tooltip]="perm.description" (click)="toggleCheckbox(perm)"
                  appFlex="{{effectivePermissions?80:85}}"
                  class="fl-permissions-display-name fl-cursor-pointer">
                <p>{{perm.display_name }}</p>
              </td>
              <td appFlex="5">
                <mat-checkbox [(ngModel)]="perm.granted" [color]="'primary'" class="fl-permissions-checkboxes"
                              [disabled]="disabled"></mat-checkbox>
              </td>
              <td *ngIf="effectivePermissions" appFlex="5" class="no-overflow-hidden">
                <span *ngIf="getEffectivePermission(perm.name); else noEffectivePerm">
                  <mat-icon class="effective-perm-icon" fl-tooltip="Effective permission" i18n-fl-tooltip>
                    check_box
                  </mat-icon>
                </span>
                <ng-template #noEffectivePerm>
                  <mat-icon class="effective-perm-icon" fl-tooltip="Effective permission" i18n-fl-tooltip>
                    check_box_outline_blank
                  </mat-icon>
                </ng-template>
              </td>
            </tr>
            </tbody>
          </ng-container>
        </table>
      </div>
    </div>
  </div>
</div>
