@if (frame !== undefined) {
  <section class="mat-typography">
    @if (frame.filename || frame.module) {
      <span
        [matTooltip]="
          frame.absPath
            ? showToolTip(frame.absPath, frame.filename, frame.module)
            : ''
        "
      >
        {{
          displayFilenameOrModule(frame.platform, frame.filename, frame.module)
        }}
      </span>
      @if (
        displayFilenameOrModule(
          frame.platform,
          frame.filename,
          frame.module
        ) === frame.module && frame.filename
      ) {
        <a
          class="help-button small-icon-button"
          mat-icon-button
          matTooltipPosition="above"
          [matTooltip]="frame.filename"
        >
          <mat-icon>help</mat-icon>
        </a>
      }
      @if (isUrl(frame.absPath)) {
        <a
          [href]="frame.absPath ? sanitizeUrl(frame.absPath) : null"
          target="_blank"
          >{{ frame.absPath ? sanitizeUrl(frame.absPath) : null }}</a
        >
      }
      @if (frame.function) {
        in
      }
    }
    <!-- TODO: Add rawFunction conditions-->
    @if (frame.function) {
      {{ frame.function }}
    }
    @if (frame.lineNo && frame.lineNo > 0) {
      at line {{ frame.lineNo }}
      @if (frame.colNo && frame.colNo > 0) {
        :{{ frame.colNo }}
      }
    }
    @if (frame.package) {
      within {{ frame.package }}
    }
    <!--origAbsPath not in frame docs
    code: https://gitlab.com/glitchtip/sentry-open-source/sentry/-/blob/master/src/sentry/static/sentry/app/components/events/interfaces/frame.jsx#L245
    docs: https://gitlab.com/glitchtip/sentry-open-source/sentry-docs/-/blob/master/src/collections/_documentation/development/sdk-dev/event-payloads/stacktrace.md
    -->
  </section>
}