@if (eventEntryException(); as exception) {
  <section class="mat-typography">
    <section class="exception">
      <div class="header-wrapper">
        <div class="text-wrapper">
          <h3>Exception</h3>
          @if (group.value === "full-data") {
            <div class="spacer">
              <button mat-button (click)="getFlippedFrames()">
                (most recent call
                @if (isReversed()) {
                  <span>first</span>
                }
                @if (isReversed() === false) {
                  <span>last</span>
                }
                )
              </button>
            </div>
          }
        </div>
        <mat-button-toggle-group #group="matButtonToggleGroup">
          <mat-button-toggle
            [checked]="true"
            value="full-data"
            aria-label="full data"
          >
            Full
          </mat-button-toggle>
          <mat-button-toggle value="raw" aria-label="raw data">
            Raw
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>
      @if (group.value === "full-data" && exception.values) {
        <div class="full">
          @for (value of exception.values; track value) {
            <div>
              <h2>{{ value.type }}</h2>
              <p class="subtitle">{{ value.value }}</p>
              @if (value.mechanism) {
                <mat-chip-set role="list">
                  <mat-chip disabled role="listitem"
                    >mechanism: {{ value.mechanism.type }}</mat-chip
                  >
                  <mat-chip color="accent" highlighted disabled role="listitem"
                    >handled:
                    {{ value.mechanism.handled ? "yes" : "no" }}</mat-chip
                  >
                  @if (value.mechanism.data) {
                    <mat-chip disabled role="listitem"
                      >function: {{ value.mechanism.data.function }}</mat-chip
                    >
                  }
                </mat-chip-set>
              }
              @if (checkStacktraceInterface(value.stacktrace)) {
                <mat-accordion [multi]="true" displayMode="flat">
                  <!-- TODO:  Add additional conditions for non expandable frames
                          https://gitlab.com/glitchtip/sentry-open-source/sentry/-/blob/master/src/sentry/static/sentry/app/components/events/interfaces/frame.jsx#L107-->
                  @for (
                    frame of value.stacktrace.frames;
                    track frame;
                    let i = $index
                  ) {
                    <mat-expansion-panel
                      [disabled]="
                        (!frame.context || !frame.context.length) && !frame.vars
                      "
                      [expanded]="frame.context?.length ? i === 0 : undefined"
                      class="mat-elevation-z0"
                    >
                      <mat-expansion-panel-header
                        collapsedHeight="auto"
                        expandedHeight="auto"
                        [class.disabled-panel]="
                          !frame.context?.length && !frame.vars
                        "
                        [class.highlighted]="frame.inApp"
                      >
                        <gt-frame-title
                          [frame]="frame"
                          [eventPlatform]="eventPlatform()"
                        ></gt-frame-title>
                      </mat-expansion-panel-header>
                      @if (frame.context) {
                        <gt-frame-expanded
                          [lineNo]="frame.lineNo"
                          [context]="frame.context"
                          [vars]="frame.vars"
                          [eventPlatform]="eventPlatform()"
                        ></gt-frame-expanded>
                      }
                    </mat-expansion-panel>
                  }
                </mat-accordion>
              }
            </div>
          }
        </div>
      }
      @if (group.value === "raw" && exception.values) {
        <div>
          <gt-raw-stacktrace
            [eventPlatform]="eventPlatform()"
          ></gt-raw-stacktrace>
        </div>
      }
    </section>
  </section>
}