<div class="tw-flex tw-items-start tw-gap-4">
  <div class="tw-flex-1 tw-min-w-0">
    <div
      class="tw-text-base tw-font-medium"
      [ngClass]="completed() ? 'tw-text-fg-inactive' : 'tw-text-fg-heading'"
    >
      {{ title() }}
    </div>
    @if (subtitle() && !completed()) {
      <div class="tw-text-sm tw-text-fg-body">{{ subtitle() }}</div>
    }
    @if (!completed()) {
      <div class="tw-text-sm tw-text-fg-body">
        <ng-content></ng-content>
      </div>
    }
  </div>

  <div class="tw-shrink-0">
    @if (completed()) {
      <span bitBadge variant="success">{{ "completed" | i18n }}</span>
    } @else if (ctaText()) {
      @if (route()) {
        <a bitButton buttonType="primary" [routerLink]="route()">
          @if (ctaIcon()) {
            <i class="bwi bwi-fw {{ ctaIcon() }}" aria-hidden="true"></i>
          }
          {{ ctaText() }}
        </a>
      } @else {
        <button
          bitButton
          buttonType="primary"
          type="button"
          [disabled]="isDisabled()"
          (click)="ctaClick.emit()"
        >
          @if (ctaIcon()) {
            <i class="bwi bwi-fw {{ ctaIcon() }}" aria-hidden="true"></i>
          }
          {{ ctaText() }}
        </button>
      }
    }
  </div>
</div>
