<div class="row a-inboxHeadingContent{{# extra-class-headingContent }} {{ extra-class-headingContent }}{{/ extra-class-headingContent }}">
  {{# heading-icon }}
    <div class="col-auto a-msgIconWrapper">
      {{> felles-komponenter-ikon }}
      {{# heading-secondary-icon }}
        {{> felles-komponenter-ikon }}
      {{/ heading-secondary-icon }}
    </div>
  {{/ heading-icon}}
  {{# heading-tekst }}
    <div class="col a-msgHeadingTextContainer">
      <div class="d-inline-block {{# hasClassW100 }}w-100{{/ hasClassW100 }}">
        {{# due-date-content }}
          <div class="col-auto d-md-none a-msgDuedate">
            <span class="a-fontBold">{{ due-date-label }}</span>
            {{ due-date }}
          </div>
        {{/ due-date-content }}

        {{# state-content }}
            <div class="col-auto d-md-none a-msgState">
              <span{{# state-class }} class="{{ state-class }}"{{/ state-class }}>{{ state-text }}</span>
            </div>
        {{/ state-content }}

        {{^ is-h1 }}
          <h3 class="mb-0 a-js-truncate-2-sm-down" title="{{ textDescription }} {{ textMain }}">
            {{ textDescription }}
            <span class="a-msgTitle">{{ textMain }}</span>
          </h3>
        {{/ is-h1 }}
        {{# is-h1 }}
          <h1 class="mb-0 a-js-truncate-2-sm-down" title="{{ textDescription }} {{ textMain }}">
            {{ textDescription }}
            <span class="a-msgTitle">{{ textMain }}</span>
          </h1>
        {{/ is-h1 }}

        <div class="a-fontSizeXXS">{{ textSmall }}</div>

        {{# textSmallTwoColumns }}
        <div class="row">
          <div class="col-6">
            <div class="a-fontSizeXXS">{{ textSmall-left }}</div>
            </div>
          <div class="col-6">
            <div class="a-fontSizeXXS text-right">{{ textSmall-right }}</div>
          </div>
        </div>
        {{/ textSmallTwoColumns }}
      </div>

      {{# form-heading-icon }}
        <div class="col-auto pt-2 pt-md-0">
          {{> felles-komponenter-ikon }}
        </div>
      {{/ form-heading-icon }}

    </div>
  {{/ heading-tekst }}

  {{# due-date-content }}
    {{# past-due-date }}
      <div class="col-auto d-none d-md-flex a-msgDuedateIcon">
        {{> felles-komponenter-ikon }}
      </div>
    {{/ past-due-date }}
    <div class="col-auto d-none d-md-flex a-msgDuedate">
      <span class="a-fontBold">{{ due-date-label }}</span>
      {{ due-date }}
    </div>
  {{/ due-date-content }}

  {{# state-content }}
      <div class="col-auto d-none d-md-flex a-msgState">
        <span{{# state-class }} class="{{ state-class }}"{{/ state-class }}>{{ state-text }}</span>
      </div>
  {{/ state-content }}

  {{# shortcuts }}
    <div class="col-auto d-none d-md-flex a-msgShortcutsContainer">
      {{# shortcut-icons }}
        <div{{# buttonClass }} class="{{ buttonClass }}"{{/ buttonClass }}{{^ disabled }} role="button" tabindex="0"{{/ disabled }}{{# aria-label }} aria-label="{{ aria-label }}"{{/ aria-label }}{{# aria-hidden }} aria-hidden="true"{{/ aria-hidden }}{{# tooltip-title }} title="{{ tooltip-title }}"{{/ tooltip-title }}>
          {{# button-icon }}
            {{> felles-komponenter-ikon }}
          {{/ button-icon }}
        </div>
      {{/ shortcut-icons }}
    </div>
  {{/ shortcuts }}
</div>
