@if ((dataService.reportStatus$ | async) == ReportStatusEnum.Loading) {
  <dirt-report-loading></dirt-report-loading>
} @else {
  <ul
    class="tw-inline-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-6 tw-m-0 tw-p-0 tw-w-full tw-auto-cols-auto tw-list-none"
  >
    <li class="tw-col-span-1 md:tw-col-span-2 lg:tw-col-span-2">
      <trend-widget
        [data]="(riskOverTimeData$ | async)!"
        [loading]="(isRiskOverTimeLoading$ | async) ?? false"
        [error]="riskOverTimeError$ | async"
        (timespanChanged)="onTimespanChanged($event)"
        (viewChanged)="onViewChanged($event)"
      ></trend-widget>
    </li>
    <li class="tw-col-span-1 md:tw-col-span-2 lg:tw-col-span-1">
      <div class="tw-flex tw-flex-col tw-gap-6">
        <dirt-activity-card
          [title]="'atRiskMembers' | i18n"
          [cardMetrics]="'membersAtRiskCount' | i18n: totalCriticalAppsAtRiskMemberCount"
          [metricDescription]="'membersWithAccessToAtRiskItemsForCriticalApplications' | i18n"
          actionText="{{ 'viewAtRiskMembers' | i18n }}"
          [showActionLink]="totalCriticalAppsAtRiskMemberCount > 0"
          (actionClick)="onViewAtRiskMembers()"
          [testId]="'at-risk-members-card'"
        >
        </dirt-activity-card>
        <dirt-password-change-metric
          [organizationId]="this.organizationId()"
        ></dirt-password-change-metric>
      </div>
    </li>

    <li class="tw-col-span-1 md:tw-col-span-2 lg:tw-col-span-1">
      <dirt-activity-card
        #allAppsOrgAtRiskApplications
        [title]="'criticalApplications' | i18n"
        [cardMetrics]="
          totalCriticalAppsCount === 0
            ? ('countOfCriticalApplications' | i18n: totalCriticalAppsCount)
            : ('countOfApplicationsAtRisk' | i18n: totalCriticalAppsAtRiskCount)
        "
        [metricDescription]="
          totalCriticalAppsCount === 0
            ? newApplicationsCount > 0
              ? ('noCriticalApplicationsMarkedYet' | i18n)
              : ('onceYouMarkApplicationsCriticalTheyWillDisplayHere' | i18n)
            : ('criticalApplicationsAreAtRisk'
              | i18n: totalCriticalAppsAtRiskCount : totalCriticalAppsCount)
        "
        actionText="{{ 'viewAtRiskApplications' | i18n }}"
        [showActionLink]="totalCriticalAppsAtRiskCount > 0"
        (actionClick)="onViewAtRiskApplications()"
        [testId]="'critical-applications-card'"
      >
      </dirt-activity-card>
    </li>

    <!-- All Caught Up State -->
    @if (isAllCaughtUp) {
      <li
        class="tw-col-span-1"
        [bitPopoverAnchorFor]="prioritizeRisksCoachmark.popover()"
        [popoverOpen]="prioritizeRisksOpen()"
        [position]="'above-center'"
        [spotlight]="true"
      >
        <dirt-activity-card
          [title]="'applicationsNeedingReview' | i18n"
          [cardMetrics]="'allCaughtUp' | i18n"
          [metricDescription]="'noNewApplicationsToReviewAtThisTime' | i18n"
          [iconClass]="'bwi-check-circle'"
          [iconColorClass]="'tw-text-success'"
          [buttonText]="''"
          [buttonType]="'primary'"
          (buttonClick)="onReviewNewApplications()"
          [testId]="'allCaughtUp'"
        >
        </dirt-activity-card>
      </li>
    }
    <!-- Needs Review State (No apps have been reviewed) -->
    @else if (showNeedsReviewState) {
      <li
        class="tw-col-span-1 md:tw-col-span-2 lg:tw-col-span-2"
        [bitPopoverAnchorFor]="prioritizeRisksCoachmark.popover()"
        [popoverOpen]="prioritizeRisksOpen()"
        [position]="'above-center'"
        [spotlight]="true"
      >
        <dirt-activity-card
          [title]="'applicationsNeedingReview' | i18n"
          [cardMetrics]="'organizationHasItemsSavedForApplications' | i18n: totalApplicationCount"
          [metricDescription]="'reviewApplicationsToSecureItems' | i18n"
          [iconClass]="'bwi-exclamation-triangle'"
          [iconColorClass]="'tw-text-warning'"
          [buttonText]="'reviewApplications' | i18n"
          [buttonType]="'primary'"
          (buttonClick)="onReviewNewApplications()"
          [testId]="'needs-review-card'"
        >
        </dirt-activity-card>
      </li>
    }
    <!-- Default State (New applications to review) -->
    @else {
      <li
        class="tw-col-span-1"
        [bitPopoverAnchorFor]="prioritizeRisksCoachmark.popover()"
        [popoverOpen]="prioritizeRisksOpen()"
        [position]="'above-center'"
        [spotlight]="true"
      >
        <dirt-activity-card
          [title]="'reviewNewApplications' | i18n"
          [cardMetrics]="'newApplicationsWithCount' | i18n: newApplicationsCount"
          [metricDescription]="'newApplicationsDescription' | i18n"
          [iconClass]="'bwi-exclamation-triangle'"
          [iconColorClass]="'tw-text-warning'"
          [buttonText]="'reviewNow' | i18n"
          [buttonType]="'primary'"
          (buttonClick)="onReviewNewApplications()"
          [testId]="'review-new-applications-card'"
        >
        </dirt-activity-card>
      </li>
    }
  </ul>

  <dirt-ai-coachmark #prioritizeRisksCoachmark stepId="prioritizeRisks"></dirt-ai-coachmark>
}