{{! make the _globals object in course.json available to this template}}
{{import_globals}}

{{#any displayTitle body instruction}}
<div class="component__header {{lowercase _component}}__header">
  <div class="component__header-inner {{lowercase _component}}__header-inner">

    {{#if displayTitle}}
    <div class="component__title {{lowercase _component}}__title">

      {{#unless _disableAccessibilityState}}
      <div class="js-heading"></div>
      {{/unless}}

      <div {{#if titleColor}}style='color:{{titleColor}}'{{/if}} class="component__title-inner {{lowercase _component}}__title-inner"{{#unless _disableAccessibilityState}} aria-hidden="true"{{/unless}}>
        {{{compile displayTitle}}}
      </div>
      {{#if titleImg}}

        <div class="title-image">
          <img src="{{titleImg}}" alt="{{title}}">
        </div>

      {{/if}}

    </div>
    {{/if}}

    {{component_description}}

    {{#if body}}
    <div class="component__body {{lowercase _component}}__body">
      <div class="component__body-inner {{lowercase _component}}__body-inner">
        {{{compile body}}}
      </div>
    </div>
    {{/if}}

    {{#any instruction mobileInstruction}}
    <div class="component__instruction {{lowercase _component}}__instruction">
      <div class="component__instruction-inner {{lowercase _component}}__instruction-inner">
        {{{compile instruction}}}
      </div>
    </div>
    {{/any}}

  </div>
</div>
{{/any}}
