<div class="sky-page-header">
  <ng-content select="sky-page-header-alerts" />
  <div class="sky-page-header-info">
    <ng-content select="sky-page-header-avatar" />
    <div class="sky-page-header-text-and-content">
      <h1 class="sky-page-header-text">
        @if (parentLink) {
          <span class="sky-page-header-parent-link-wrapper">
            @if (parentLink.permalink?.route; as permalinkRoute) {
              <a
                class="sky-font-heading-1 sky-page-header-parent-link"
                [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"
                >{{ parentLink.label }}</a
              >
            } @else if (parentLink.permalink?.url) {
              <a
                class="sky-font-heading-1 sky-page-header-parent-link"
                [skyHref]="parentLink.permalink.url"
                >{{ parentLink.label }}</a
              >
            }
            <span class="sky-page-header-chevron">
              <sky-icon icon="chevron-right" />
            </span>
          </span>
          <wbr />
        }
        <span class="sky-page-header-page-title sky-font-heading-1">
          {{ pageTitle }}
        </span>
      </h1>
      <div class="sky-page-header-content">
        <ng-content select="sky-page-header-details" />
        <ng-content select="sky-page-header-actions" />
      </div>
    </div>
  </div>
</div>
