<sky-box>
  <sky-box-header>
    <h2 class="sky-font-heading-2">
      {{ 'sky_action_hub_needs_attention' | skyLibResources }}
    </h2>
  </sky-box-header>
  <sky-box-content>
    @if (items?.length === 0) {
      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}
    } @else {
      <ul>
        @for (item of items; track item; let isLast = $last) {
          <li
            class="sky-needs-attention-item-wrapper sky-font-emphasized"
            [ngClass]="{
              'sky-border-bottom-row': !isLast
            }"
          >
            @if (
              (item | linkAs: 'skyAppLink') && item.permalink?.route;
              as permalinkRoute
            ) {
              <a
                class="sky-needs-attention-item"
                [skyAppLink]="permalinkRoute.commands"
                [queryParams]="permalinkRoute.extras?.queryParams"
                [queryParamsHandling]="
                  permalinkRoute.extras?.queryParamsHandling
                "
                [fragment]="permalinkRoute.extras?.fragment"
                [preserveFragment]="permalinkRoute.extras?.preserveFragment"
                [skipLocationChange]="permalinkRoute.extras?.skipLocationChange"
                [replaceUrl]="permalinkRoute.extras?.replaceUrl"
                [state]="permalinkRoute.extras?.state"
                >{{ item.title }} {{ item.message }}</a
              >
            } @else if (item.permalink) {
              @if (item | linkAs: 'skyHref') {
                <a
                  class="sky-needs-attention-item"
                  [skyHref]="item.permalink.url"
                  >{{ item.title }} {{ item.message }}</a
                >
              } @else if (item | linkAs: 'href') {
                <a class="sky-needs-attention-item" [href]="item.permalink.url"
                  >{{ item.title }} {{ item.message }}</a
                >
              }
            } @else if (item | linkAs: 'button') {
              <button
                class="sky-needs-attention-item sky-btn sky-btn-link-inline"
                type="button"
                (click)="item?.click({ item })"
              >
                {{ item.title }} {{ item.message }}
              </button>
            }
            <sky-icon
              *skyThemeIf="'default'"
              class="sky-needs-attention-item-icon"
              icon="caret-right"
            />
            <sky-icon
              *skyThemeIf="'modern'"
              class="sky-needs-attention-item-icon"
              icon="chevron-right"
            />
          </li>
        }
      </ul>
    }
  </sky-box-content>
</sky-box>
