<bit-popover [title]="service.getStepTitle(stepId())" (closed)="service.skipTour()">
  <p bitTypography="body2" class="tw-mb-3">
    {{ service.getStepDescription(stepId()) }}
  </p>

  @if (service.getStepLearnMoreUrl(stepId()); as url) {
    <a
      bitLink
      linkType="primary"
      [href]="url"
      target="_blank"
      rel="noopener noreferrer"
      class="tw-mb-3 tw-flex tw-items-center tw-gap-1"
      endIcon="bwi-external-link"
    >
      {{ "learnMore" | i18n }}
    </a>
  }

  <bit-popover-footer class="tw-flex tw-w-full tw-items-center tw-justify-between">
    <span bitTypography="body2" class="tw-text-muted">
      {{ "coachmarkStepIndicator" | i18n: service.currentStepNumber() : service.totalSteps() }}
    </span>

    <div class="tw-flex tw-gap-2">
      @if (service.currentStepNumber() > 1) {
        <button bitButton buttonType="secondary" type="button" (click)="service.goToPreviousStep()">
          {{ "back" | i18n }}
        </button>
      }
      <button bitButton buttonType="primary" type="button" (click)="service.goToNextStep()">
        {{
          service.currentStepNumber() === service.totalSteps() ? ("done" | i18n) : ("next" | i18n)
        }}
      </button>
    </div>
  </bit-popover-footer>
</bit-popover>
