template.hbs

<div class="mission-page">
  <RobotDialog>
    <Bubble @message={{t "pages.missions.start-page.welcome"}} />
  </RobotDialog>
  <div class="mission-page__body">
    <MissionCard
      @title={{@model.name}}
      @colorClass="area-{{@model.areaCode}}"
      @imageName="img-area-{{@model.areaCode}}"
    />
    <div class="mission-page__details">
      <LinkTo @route="identified.missions" class="details-go-back">{{t
          "pages.missions.start-page.back-to-missions"
        }}</LinkTo>
      <p class="details-list__title details-list__title--big">{{t "pages.missions.start-page.purpose-title"}}</p>
      <ul class="details-list">
        {{#each this.learningObjectives as |element|}}
          <li>
            <Markdown::MarkdownToHtml @markdown={{element}} class="details-list__item" />
          </li>
        {{/each}}
      </ul>

      <PixButtonLink
        @route="identified.missions.mission.resume"
        @shape="rounded"
        class="details-action"
        {{on "click" this.activeLoadingButton}}
      >
        <p>{{t "pages.missions.start-page.start-mission"}}</p>
        <FaIcon @icon="arrow-right" class="details-action__icon" />
      </PixButtonLink>

      <PixButton class="details-action details-action__loader" @isLoading="true" />
    </div>
  </div>
</div>