@if (projectType$ | async; as type) {
  <div class="grid-main-container">
    @if (loading$ | async) {
      <div class="loading-sp-wrapper">
        <mat-spinner diameter="25" class="spinner" color="primary"> </mat-spinner>
      </div>
    }
    <div class="owned-project-grid-container">
      @for (item of selection.selected; track item; let i = $index) {
        <div
          class="item card"
          matRipple
          (click)="navigateToProject(type, item, $event)"
          [ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
        >
          <div class="text-part">
            @if (item.details && item.details.changeDate) {
              <span class="top cnsl-secondary-text"
                >{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}
                {{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
              >
            }
            <div class="name-row">
              @if ($any(item).name) {
                <span class="name">{{ $any(item).name }}</span>
              }
              @if ($any(item).projectName) {
                <span class="name">{{ $any(item).projectName }}</span>
              }
              <div
                class="state-dot"
                [ngClass]="{
                  active: item.state === ProjectState.PROJECT_STATE_ACTIVE,
                  inactive: item.state === ProjectState.PROJECT_STATE_INACTIVE,
                }"
              ></div>
            </div>
            @if (item.details && item.details.creationDate) {
              <span class="created"
                >{{ 'PROJECT.PAGES.CREATEDON' | translate }}
                {{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
              >
            }
            <span class="fill-space"></span>
          </div>
          <template [ngTemplateOutlet]="deleteButton" [ngTemplateOutletContext]="{ key: item }"></template>
          <template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: item }"></template>
        </div>
      }
    </div>
    <div class="owned-project-grid-container">
      @for (item of notPinned; track item; let i = $index) {
        <div
          class="item card"
          matRipple
          (click)="navigateToProject(type, $any(item), $event)"
          [ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
          data-e2e="grid-card"
        >
          <div class="text-part">
            @if (item.details && item.details.changeDate) {
              <span class="top cnsl-secondary-text"
                >{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}
                {{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
              >
            }
            <div class="name-row">
              @if ($any(item).name) {
                <span class="name">{{ $any(item).name }}</span>
              }
              @if ($any(item).projectName) {
                <span class="name">{{ $any(item).projectName }}</span>
              }
              <div
                class="state-dot"
                [ngClass]="{
                  active: item.state === ProjectState.PROJECT_STATE_ACTIVE,
                  inactive: item.state === ProjectState.PROJECT_STATE_INACTIVE,
                }"
              ></div>
            </div>
            @if ($any(item).projectOwnerName) {
              <span class="owning-org">{{ $any(item).projectOwnerName }}</span>
            }
            @if (item.details && item.details.creationDate) {
              <span class="created cnsl-secondary-text"
                >{{ 'PROJECT.PAGES.CREATEDON' | translate }}
                {{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span
              >
            }
            <span class="fill-space"></span>
          </div>
          @if (type === ProjectType.PROJECTTYPE_OWNED) {
            <template [ngTemplateOutlet]="deleteButton" [ngTemplateOutletContext]="{ key: item }"></template>
          }
          <template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: item }"></template>
        </div>
      }
      @if ((loading$ | async) === false && projectList.length === 0) {
        <p class="n-items cnsl-secondary-text">
          {{ 'PROJECT.PAGES.NOITEMS' | translate }}
        </p>
      }
      @if (type === ProjectType.PROJECTTYPE_OWNED) {
        <ng-template cnslHasRole [hasRole]="['project.create']">
          <div class="add-project-button card" matRipple (click)="addItem()">
            <mat-icon class="icon">add</mat-icon>
            <span>{{ 'PROJECT.PAGES.ADDNEW' | translate }}</span>
            <cnsl-action-keys [doNotUseContrast]="true" [withoutMargin]="true" (actionTriggered)="addItem()">
            </cnsl-action-keys>
          </div>
        </ng-template>
      }
    </div>
  </div>
}

<ng-template #deleteButton let-key="key">
  @if (key.id !== zitadelProjectId) {
    <button
      matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
      color="warn"
      (click)="deleteProject($event, key)"
      class="delete-button"
      mat-icon-button
      data-e2e="delete-project-button"
    >
      <i class="las la-trash"></i>
    </button>
  }
</ng-template>

<ng-template #toggleButton let-key="key">
  <button
    matTooltip="{{ 'ACTIONS.PIN' | translate }}"
    [ngClass]="{ selected: selection.isSelected(key) }"
    (click)="toggle(key, $event)"
    class="edit-button"
    mat-icon-button
  >
    @if (selection.isSelected(key)) {
      <mat-icon svgIcon="mdi_pin"></mat-icon>
    }
    @if (!selection.isSelected(key)) {
      <mat-icon svgIcon="mdi_pin_outline"></mat-icon>
    }
  </button>
</ng-template>