@if (projectType$ | async; as type) {
  <div class="projects-table-wrapper">
    <cnsl-refresh-table
      [hideRefresh]="true"
      (refreshed)="refreshPage(type)"
      [timestamp]="viewTimestamp"
      [selection]="selection"
      [loading]="loading$ | async"
    >
      @if (!selection.hasValue()) {
        <cnsl-filter-project
          actions
          (filterChanged)="applySearchQuery(type, $any($event))"
          (filterOpen)="filterOpen = $event"
        ></cnsl-filter-project>
      }
      <ng-template actions cnslHasRole [hasRole]="['project.create']">
        @if (type === ProjectType.PROJECTTYPE_OWNED) {
          <a [routerLink]="['/projects', 'create']" color="primary" mat-raised-button>
            <div class="cnsl-action-button">
              <mat-icon class="icon">add</mat-icon>
              <span>{{ 'ACTIONS.NEW' | translate }}</span>
              <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', 'create'])"> </cnsl-action-keys>
            </div>
          </a>
        }
      </ng-template>
      <div class="table-wrapper">
        <table class="table" mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>
              <div class="selection">
                <mat-checkbox
                  color="primary"
                  (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()"
                >
                </mat-checkbox>
              </div>
            </th>
            <td mat-cell *matCellDef="let row">
              <div class="selection">
                <mat-checkbox
                  color="primary"
                  (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)"
                >
                </mat-checkbox>
              </div>
            </td>
          </ng-container>
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.NAME' | translate }}</th>
            <td
              class="pointer"
              [routerLink]="
                type === ProjectType.PROJECTTYPE_OWNED
                  ? ['/projects', project.id]
                  : ['/granted-projects', project.projectId, 'grant', project.grantId]
              "
              mat-cell
              *matCellDef="let project"
            >
              @if (project.name) {
                <span>{{ project.name }}</span>
              }
              @if (project.projectName) {
                <span>{{ project.projectName }}</span>
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="projectOwnerName">
            <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }}</th>
            <td class="pointer" mat-cell *matCellDef="let project">
              {{ project.projectOwnerName }}
            </td>
          </ng-container>
          <ng-container matColumnDef="state">
            <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.STATE' | translate }}</th>
            <td
              class="pointer"
              [routerLink]="
                type === ProjectType.PROJECTTYPE_OWNED
                  ? ['/projects', project.id]
                  : ['/granted-projects', project.projectId, 'grant', project.grantId]
              "
              mat-cell
              *matCellDef="let project"
            >
              @if (project.state) {
                <span
                  class="state"
                  [ngClass]="{
                    active: project.state === ProjectState.PROJECT_STATE_ACTIVE,
                    inactive: project.state === ProjectState.PROJECT_STATE_INACTIVE,
                  }"
                  >{{ 'PROJECT.STATE.' + project.state | translate }}</span
                >
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="creationDate">
            <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CREATIONDATE' | translate }}</th>
            <td
              class="pointer"
              [routerLink]="
                type === ProjectType.PROJECTTYPE_OWNED
                  ? ['/projects', project.id]
                  : ['/granted-projects', project.projectId, 'grant', project.grantId]
              "
              mat-cell
              *matCellDef="let project"
            >
              @if (project.details.creationDate) {
                <span>{{ project.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="changeDate">
            <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CHANGEDATE' | translate }}</th>
            <td
              class="pointer"
              [routerLink]="
                type === ProjectType.PROJECTTYPE_OWNED
                  ? ['/projects', project.id]
                  : ['/granted-projects', project.projectId, 'grant', project.grantId]
              "
              mat-cell
              *matCellDef="let project"
            >
              @if (project.details.changeDate) {
                <span>{{ project.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="actions" stickyEnd>
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let project">
              <cnsl-table-actions>
                @if (project.id !== zitadelProjectId) {
                  <button
                    actions
                    color="warn"
                    mat-icon-button
                    matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
                    (click)="deleteProject(project.id, project.name)"
                    data-e2e="delete-project-button"
                  >
                    <i class="las la-trash"></i>
                  </button>
                }
              </cnsl-table-actions>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </div>
      @if ((loading$ | async) === false && !dataSource.data.length) {
        <div class="no-content-row">
          <i class="las la-exclamation"></i>
          <span>{{ 'PROJECT.TABLE.EMPTY' | translate }}</span>
        </div>
      }
      <cnsl-paginator
        class="paginator"
        [timestamp]="viewTimestamp"
        [length]="totalResult"
        [pageSize]="20"
        [pageSizeOptions]="[10, 20, 50, 100]"
        (page)="changePage(type)"
      ></cnsl-paginator>
    </cnsl-refresh-table>
  </div>
}