@if (activateOrganizationQuery.data(); as org) {
  <cnsl-create-layout
    title="{{ 'GRANTS.CREATE.TITLE' | translate }}"
    [createSteps]="createSteps"
    [currentCreateStep]="currentCreateStep"
    (closed)="close()"
  >
    @if (currentCreateStep === 1) {
      <p class="user-grant-create-desc cnsl-secondary-text">
        {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org }}
        <br />
        {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate }}
      </p>
      <ng-container>
        <h2>{{ 'PROJECT.GRANT.CREATE.SEL_USER' | translate }}</h2>
        <cnsl-search-user-autocomplete
          [editState]="context !== UserGrantContext.USER"
          class="block"
          [users]="user ? [user] : []"
          (selectionChanged)="selectUsers($event)"
          [target]="UserTarget.SELF"
        >
        </cnsl-search-user-autocomplete>
      </ng-container>
      @if (context && (context === UserGrantContext.USER || context === UserGrantContext.NONE)) {
        <h2 class="project-search">{{ 'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate }}</h2>
        <cnsl-search-project-autocomplete class="block" (selectionChanged)="selectProject($event.project, $event.type)">
        </cnsl-search-project-autocomplete>
      }
    }
    @if (currentCreateStep === createSteps) {
      <h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
      <cnsl-card>
        {{ $any(project)?.grantId }}
        <cnsl-project-roles-table
          [displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
          (changedSelection)="selectRoles($event)"
          [projectId]="
            project && project.id ? project.id : grantedProject && grantedProject.projectId ? grantedProject.projectId : ''
          "
          [grantId]="$any(grantedProject)?.grantId ? $any(grantedProject)?.grantId : ''"
        >
        </cnsl-project-roles-table>
      </cnsl-card>
    }
    <div class="btn-container">
      @if (currentCreateStep === 1) {
        <button
          [disabled]="!org || !(project?.id || grantedProject?.projectId) || userIds.length < 1"
          (click)="next()"
          color="primary"
          mat-raised-button
          class="big-button"
          cdkFocusInitial
        >
          {{ 'ACTIONS.CONTINUE' | translate }}
        </button>
      }
      @if (currentCreateStep === createSteps) {
        <button (click)="previous()" mat-stroked-button class="small-button">
          {{ 'ACTIONS.BACK' | translate }}
        </button>
        <button color="primary" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
          {{ 'ACTIONS.SAVE' | translate }}
        </button>
      }
    </div>
  </cnsl-create-layout>
}