<div
  class="c-card{{#if advContent}} c-card--adv{{/if}}{{#if displayType}} c-card--{{displayType}}{{/if}}{{#if cardModifier}} c-card--{{cardModifier}}{{/if}}{{#if opinion}} c-card--opinion{{/if}}{{#if audio}} c-card--audio-enabled{{/if}}{{#if audioPlaying}} c-card--audio-enabled--playing{{/if}}">

  {{!-- We require different markup for CREA listing cards --}}
  {{#ifCond displayType "==" "crea"}}
  {{> cards/card-crea this}}

  {{else ifCond displayType "==" "complete-profile"}}
  {{> cards/card-complete-profile this}}

  {{else ifCond displayType "==" "following"}}
  {{> cards/card-following this}}

  {{else}}

  {{#if link}}
  <a href="#" class="c-card__grid c-card__link">
    {{else}}
    <div class="c-card__grid">
      {{/if}}

      {{#ifCond displayType "==" "section"}}
      <span class="c-card__content-text">
        {{ section }}
      </span>
      {{/ifCond}}

      {{#if audio}}
      <div class="c-card__audio">
        {{#ifCond audio "==" "disabled"}}
        {{> button audioDisabledButton}}
        {{> tooltip audioDisabledTooltip}}
        {{else}}
        {{> button
            buttonModifierClasses="c-card__audio-button c-button--icon-only c-button--no-border c-button--transparent-default c-button--no-border-radius js-card-audio"
            buttonIconId="#audio-play"
            buttonAttributes="type=\"button\" aria-label=\"Audio Player\""
          }}
        {{/ifCond}}
      </div>
      {{/if}}

      {{#if hed}}
      <div class="c-card__content">
        {{#if label}}
        <span
          class="c-card__label{{#if label.display}} c-card__label--{{label.display}}{{/if}}{{#if advContent}} c-card__label--muted{{/if}}{{#ifCond displayType "==" "bookmark"}} c-card__label--muted{{/ifCond}}">
          {{#if label.labelText}}
          {{label.labelText}}
          {{/if}}
        </span>
        {{/if}}
        {{#ifCond displayType "!=" "utility-promo"}}
        {{#if hedLink}}
        <div class="c-card__hed">
          <a href="#" class="c-card__hed-text c-card__hed-text--link">{{ hed }}</a>
          {{#ifCond iconPosition "!=" "dek"}}
          {{#if indicatorIcon}} {{> indicator-icon icon=indicatorIcon }} {{/if}}
          {{#if videoIcon}}
          <span class="c-card__video-time">
            {{> indicator-icon icon=videoIcon }}
            <span class="c-card__video-duration">{{videoTime}}</span>
          </span>
          {{/if}}
          {{/ifCond}}
        </div>
        {{ else }}
        <div class="c-card__hed">
          <div class="c-card__hed-text">{{ hed }}</div>
          {{#ifCond iconPosition "!=" "dek"}}
          {{#if indicatorIcon}} {{> indicator-icon icon=indicatorIcon }} {{/if}}
          {{#if videoIcon}}
          <span class="c-card__video-time">
            {{> indicator-icon icon=videoIcon }}
            <span class="c-card__video-duration">{{videoTime}}</span>
          </span>
          {{/if}}
          {{/ifCond}}
        </div>
        {{/if}}
        {{/ifCond}}

        {{!-- Promo Cards Subhed --}}
        {{#if subhed}}<div class="c-card--promo__subhed">{{subhed}}</div>{{/if}}

        {{#if dek}}
        <div class="c-card__dek">
          {{ dek }}
          {{#ifCond iconPosition "==" "dek"}}
          {{#if indicatorIcon}}{{> indicator-icon icon=indicatorIcon }}{{/if}}
          {{/ifCond}}
        </div>
        {{/if}}

        {{#if meta}}
        <div class="c-card__meta">
          {{#if meta.authors~}}
          <div class="c-card__meta__authors">
            {{#each meta.authors}}
            <span class="c-card__author u-no-wrap">
              {{~#ifCond ../meta.authors.length ">" 1~}} {{~#if @last~}} and {{this~}}
              {{~else ifSecondLast @index ../meta.authors.length~}} {{~this~}}
              {{~else~}} {{~this}}, {{~/if~}} {{~else~}} {{~this~}} {{~/ifCond~}}
            </span>
            {{/each}}
          </div>
          {{/if}}
          {{#if meta.timestamp}}{{> timestamp timestamp="2 hours ago" }}{{/if}} {{#if updated}}
          <time class="c-timestamp c-timestamp--updated" datetime="2016-08-09T20:33:02+00:00">Updated</time>{{/if}}
        </div>
        {{/if}}

        {{#if actions}}
        <div class="c-card__actions">
          {{#each actions}}
          <button class="c-card__action" type="button">{{this}}</button>
          {{/each}}
        </div>
        {{/if}}

        {{#if ctaButton1Text}}
        <div class="c-card--promo__cta">
          {{#if ctaButton1Text}}
          <button class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton1Text}}</span>
          </button>
          {{/if}} {{#if ctaButton2Text}}
          <a href="#" class="c-button c-button--white-secondary">
            <span class="c-button__text">{{ctaButton2Text}}</span>
          </a>
          {{/if}}
        </div>
        {{/if}}
      </div>
      {{/if}}

      {{#if image}}
      {{#ifCond displayType "==" "bookmark"}}
      <a href="#" class="c-card__media">
        {{else}}
        <div class="c-card__media">
          {{/ifCond}}

          {{#if imgSrc}}
          <img class="c-image" src="{{ basePath }}/assets/patterns/images/{{imgSrc}}" alt="{{ hed }}">
          <div class="c-image-container">
            <img class="c-image" src="{{ basePath }}/assets/patterns/images/{{imgSrc}}" alt="{{ hed }}">
          </div>
          {{else}}
          <img class="c-image" src="http://placehold.it/300x200" alt="{{ hed }}">
          <div class="c-image-container">
            <img class="c-image" src="http://placehold.it/300x200" alt="{{ hed }}">
          </div>
          {{/if}}

          {{#if video}}
          <div class="c-article-media__info">
            <div
              class="c-article-media__label c-article-media__label--interactive c-article-media__label--interactive-indented">
              {{> interactive-label interactiveLabel }}
            </div>
          </div>
          {{/if}}

          {{#ifCond displayType "==" "bookmark"}}
      </a>
      {{else}}
    </div>
    {{/ifCond}}
    {{/if}}

    {{#ifCond displayType "==" "event"}}
    {{> button buttonModifierClasses="c-button--grey-primary" buttonText="Register Now" buttonAttributes="type=\"button\"" }}
    {{/ifCond}}

    {{#if link}}
  </a>
  {{else}}
</div>
{{/if}}
{{/ifCond}}

{{#if includeBookmarkButton}}
<div class="c-card__bookmark-container">
  <button
    class="c-button c-card__bookmark{{#ifCond this.isBookmarked "==" false}} c-card__bookmark--inactive{{/ifCond}}{{#ifCond this.isBookmarked "==" true}} c-card__bookmark--active{{/ifCond}} c-button--icon-only c-button--no-border c-button--no-border-radius c-button--transparent-default js-article-list-bookmark"
    aria-label="Bookmark" type="button" {{#if hideBookmark}} aria-hidden="true" disabled{{/if}}>
    <svg class="c-button__icon {{#if hideBookmark}} u-hidden{{/if}}" role="img" pointer-events="none" focusable="false"
      aria-hidden="true">
      <use xlink:href="{{generatedSvgSpritePath}}#bookmark"></use>
    </svg>
  </button>
</div>
{{/if}}
</div>
