main-section.hbs

<div data-test-course-page-header ...attributes>
  <CoursePage::Header::NavigationControls
    @course={{@course}}
    @stepList={{@stepList}}
    @currentStep={{@currentStep}}
    @activeStep={{@activeStep}}
    @nextStep={{@nextStep}}
    @onMobileSidebarButtonClick={{@onMobileSidebarButtonClick}}
  />

  <div class="mt-6">
    <div class="flex flex-col items-start">
      <div class="flex items-center flex-wrap gap-x-3">
        <div class="text-lg sm:text-xl md:text-2xl">
          {{#if (eq @currentStep.type "CourseStageStep")}}
            {{! @glint-expect-error not typesafe }}
            <span class="font-bold text-gray-700" data-test-step-name>{{@currentStep.courseStage.name}}</span>
            <span class="font-mono text-base sm:text-lg md:text-xl">
              {{! @glint-expect-error not typesafe }}
              <span class="text-gray-300">#</span><span class="font-mono text-gray-400 uppercase">{{@currentStep.courseStage.slug}}</span>
            </span>
          {{else}}
            <span class="font-bold text-gray-700" data-test-step-name>{{@currentStep.title}}</span>
          {{/if}}
        </div>

        <div class="flex items-center md:h-[2rem] h-[1.75rem] flex-shrink-0">
          <CoursePage::StepStatusPill @step={{@currentStep}} />
        </div>
      </div>

      {{! For complete steps, we have the "You've completed this step" banner" }}
      {{! For in-progress steps, users shouldn't be focused on this area anyway }}
      {{#if (not (or (eq @currentStep.status "complete") (eq @currentStep.status "in_progress")))}}
        <CoursePage::StepProgressIndicator @step={{@currentStep}} class="mt-2 ml-0.5" />
      {{/if}}
    </div>
  </div>
</div>