@if (initialLoadComplete() && issue() === null) {
  <gt-top-app-bar />
  <section class="l-body l-body--full-width">
    @if (organization(); as organization) {
      <mat-card class="auth-form issue-404">
        <mat-card-content>
          <h1 class="section-header-text" i18n>Issue not found</h1>
          <p class="body-text" i18n
            >This may be because the URL is pointing to an issue that doesn't
            exist or was deleted.</p
          >
          <p class="body-text" i18n
            >It's also possible that this issue was reported to a project that
            you are not able to access.</p
          >
          <a
            mat-flat-button
            color="primary"
            class="project-issues-link"
            i18n
            [routerLink]="['..']"
            >View all issues in {{ organization.name }}</a
          >
        </mat-card-content>
      </mat-card>
    }
  </section>
}
@if (issue(); as issue) {
  <gt-top-app-bar>
    <ng-container slot="left">
      <gt-back-link
        [backLinkText]="
          isMobile() ? 'Issues' : 'All issues for ' + issue.project.name
        "
        [backLinkParams]="generateBackLink(issue.project.id)"
      />
    </ng-container>
    <ng-container slot="right">
      <div class="top-bar-actions">
        @if (isMobile()) {
          <gt-issue-status-update-dropdown
            [selectedValue]="issue.status"
            (optionSelected)="updateIssueStatus($event)"
          />
        } @else {
          <mat-button-toggle-group
            [value]="issue.status"
            (change)="updateIssueStatus($event.value)"
          >
            @for (option of statusOptions; track option.value) {
              <mat-button-toggle [value]="option.value">
                {{ option.label }}
              </mat-button-toggle>
            }
          </mat-button-toggle-group>
        }
        <button
          mat-icon-button
          class="medium-icon-button"
          (click)="deleteIssue()"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </ng-container>
  </gt-top-app-bar>
  <section class="l-body l-body--full-width">
    <div class="issue-header-wrapper">
      <div class="status-indicator" [class]="'level--' + issue.level">
        <mat-icon>{{
          statusIcon()
        }}</mat-icon>
      </div>

      <gt-detail-header [title]="issueTitle()!" [subtitle]="issueSubtitle()" />
    </div>

    <div class="row">
      <mat-card class="event-detail-card left">
        <div class="tab-nav-container">
          <nav
            mat-tab-nav-bar
            class="tabbed-nav"
            mat-stretch-tabs="false"
            [tabPanel]="tabPanel"
          >
            <a
              mat-tab-link
              [routerLink]="['./']"
              routerLinkActive
              [active]="details.isActive"
              [routerLinkActiveOptions]="{ exact: true }"
              #details="routerLinkActive"
              i18n
              >Event Details</a
            >
            <a
              mat-tab-link
              [routerLink]="['user-reports']"
              routerLinkActive
              [active]="reports.isActive"
              #reports="routerLinkActive"
            >
              @if (issue.userReportCount > 0) {
                <span
                  [matBadge]="
                    issue.userReportCount < 100
                      ? issue.userReportCount.toString()
                      : '99+'
                  "
                  matBadgeOverlap="false"
                  class="report-badge"
                  i18n
                  >User Reports</span
                >
              }
              @if (issue.userReportCount === 0) {
                User Reports
              }
            </a>
            <a
              mat-tab-link
              [routerLink]="['comments']"
              routerLinkActive
              [active]="comments.isActive"
              #comments="routerLinkActive"
            >
              @if (issue.numComments > 0) {
                <span
                  [matBadge]="
                    issue.numComments < 100 ? issue.numComments : '99+'
                  "
                  matBadgeOverlap="false"
                  class="report-badge"
                  i18n
                  >Comments
                </span>
              } @else {
                <span i18n>Comments</span>
              }
            </a>
            <a
              mat-tab-link
              [routerLink]="['merged']"
              routerLinkActive
              [active]="merged.isActive"
              #merged="routerLinkActive"
              i18n
              >Merged</a
            >
          </nav>
        </div>
        <mat-card-content>
          <mat-tab-nav-panel #tabPanel>
            <router-outlet></router-outlet>
          </mat-tab-nav-panel>
        </mat-card-content>
      </mat-card>
      <aside class="right">
        <mat-card appearance="outlined">
          <mat-card-content>
            <dl>
              <div>
                <dt class="caption-text">Issue #</dt>
                <dd class="body-text">{{ issue?.shortId }}</dd>
              </div>
              <div>
                <dt class="caption-text">Events</dt>
                <dd class="body-text">{{ issue?.count }}</dd>
              </div>
              <div>
                <dt class="caption-text">Level</dt>
                <dd class="body-text">{{ issue.level | titlecase }}</dd>
              </div>
              <div>
                <dt class="caption-text">First Seen</dt>
                <dd class="body-text">{{ issue.firstSeen | daysAgo }}</dd>
                <dd class="caption-text">
                  {{ issue?.firstSeen | date: "long" }}
                </dd>
              </div>
              <div>
                <dt class="caption-text">Last Seen</dt>
                <dd class="body-text">{{ issue.lastSeen | daysAgo }}</dd>
                <dd class="caption-text">
                  {{ issue?.lastSeen | date: "long" }}
                </dd>
              </div>
            </dl>
          </mat-card-content>
        </mat-card>
        <gt-issue-detail-tags [issueID]="issueID()"></gt-issue-detail-tags>
      </aside>
    </div>
  </section>
}