@if (orgSlug(); as orgSlug) {
  <mat-card>
    <mat-card-header class="card-header">
      <mat-card-title i18n>Projects</mat-card-title>
      @if (errors().addProjectToTeam) {
        <mat-error>{{ errors().addProjectToTeam }}</mat-error>
      }
      <div>
        @if (userTeamRole() !== "member") {
          <mat-form-field appearance="outline">
            <mat-label i18n>Add Project</mat-label>
            <mat-select
              (selectionChange)="addProject()"
              [formControl]="project"
            >
              @for (project of projectsNotOnTeam(); track project) {
                <mat-option [value]="project.slug">
                  {{ project.name }}
                </mat-option>
              } @empty {
                <mat-option disabled i18n>No projects</mat-option>
              }
            </mat-select>
          </mat-form-field>
        }
      </div>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content>
      @if (projectsOnTeam().length === 0) {
        <p class="center-text" i18n>This team doesn't have any projects</p>
      } @else {
        <ul>
          @if (errors().removeProjectFromTeam) {
            <mat-error class="center-text">{{ errors().removeProjectFromTeam }}</mat-error>
          }
          @for (project of projectsOnTeam(); track project) {
            <li class="team-project-list-item">
              <a
                class="team-name"
                [routerLink]="['/', orgSlug, 'issues']"
                [queryParams]="{ project: project.id }"
                >{{ project.name }}</a
              >
              <gt-loading-button
                buttonText="Remove"
                buttonStyle="stroked"
                [loading]="project.slug === loading().removeProjectFromTeam"
                (buttonClick)="removeProject(project.slug!)"
                id="remove-team-member"
              ></gt-loading-button>
            </li>
          }
        </ul>
      }
    </mat-card-content>
  </mat-card>
}