@if (team(); as team) {
  <mat-card>
    <mat-card-header>
      <mat-card-title i18n>Settings</mat-card-title>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content>
      @if (errors().updateName) {
        <mat-error class="server-error center-text">{{
          errors().updateName
        }}</mat-error>
      }
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <mat-form-field appearance="outline">
          <mat-label>Slug</mat-label>
          <input matInput formControlName="slug" [value]="team.slug" />
          <mat-error>
            @if (this.form.get("slug")?.errors?.required) {
              <span i18n>Enter a team name</span>
            }
          </mat-error>
        </mat-form-field>
        <gt-loading-button
          [disabled]="this.form.get('slug')?.value === team.slug"
          [loading]="loading().updateName"
          buttonText="Update Name"
          id="update-project-name"
        >
        </gt-loading-button>
      </form>
    </mat-card-content>
  </mat-card>
}
<mat-card>
  <mat-card-header>
    <mat-card-title i18n>Delete Team</mat-card-title>
  </mat-card-header>
  <mat-divider></mat-divider>
  <mat-card-content class="remove-content">
    <div>
      <p i18n
        >By deleting your team, you will lose all associated data. This cannot
        be undone.</p
      >
      <mat-error></mat-error>
    </div>
    <gt-loading-button
      buttonText="Delete Team"
      [loading]="loading().deleteTeam"
      (buttonClick)="deleteTeam()"
    >
    </gt-loading-button>
  </mat-card-content>
</mat-card>