<section
  class="course-visualize-term"
  data-test-course-visualize-term
  {{did-insert (perform this.load)}}
>
  {{#unless this.load.isRunning}}
    <div class="breadcrumbs" data-test-breadcrumb>
      <span>
        <LinkTo @route="course" @model={{@model.course}}>
          {{@model.course.title}}
        </LinkTo>
      </span>
      <span>
        <LinkTo @route="course-visualizations" @model={{@model.course}}>
          {{t "general.visualizations"}}
        </LinkTo>
      </span>
      <span>
        <LinkTo @route="course-visualize-vocabularies" @model={{@model.course}}>
          {{t "general.vocabularies"}}
        </LinkTo>
      </span>
      <span>
        <LinkTo @route="course-visualize-vocabulary" @models={{array @model.course.id @model.term.vocabulary.id}}>
          {{@model.term.vocabulary.title}}
        </LinkTo>
      </span>
      <span>
        {{@model.term.title}}
      </span>
    </div>
    <h2>
      {{t
        "general.sessionTypesFor"
        subject=(concat @model.term.vocabulary.title " - " @model.term.title)
      }}
    </h2>
    <h3 class="clickable" data-test-title>
      <LinkTo @route="course" @model={{@model.course}}>
        {{@model.course.title}}
        {{#if this.academicYearCrossesCalendarYearBoundaries}}
          {{@model.course.year}} - {{add @model.course.year 1}}
        {{else}}
          {{@model.course.year}}
        {{/if}}
      </LinkTo>
    </h3>
    <div class="visualizations">
      <VisualizerCourseTerm @course={{@model.course}} @term={{@model.term}} />
    </div>
  {{/unless}}
</section>
