<div class="c-card{{#if advContent}} c-card--adv{{/if}}{{#if displayType}} c-card--{{displayType}}{{/if}}{{#if opinion}} c-card--opinion{{/if}}">

  {{!-- We require different markup for CREA listing cards --}}
  {{#ifCond displayType "==" "crea"}}
    <div class="c-card--crea__image">
      <div class="c-image-container">
        <img class="c-image" src="http://placehold.it/300x200" alt="{{listing.address}}">
      </div>
      <div class="c-card--crea__gallery-open">
        <svg class="c-card--crea__gallery-open__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{generatedSvgSpritePath}}#icon-photo-arrow"></use>
        </svg>
      </div>
    </div>

    <div class="c-card--crea__info">
      <div class="c-card--crea__info__price">{{listing.price}}</div>
      <div class="c-card--crea__info__address">{{listing.address}}</div>

      <div class="c-card--crea__detail">
        <div class="c-card--crea__detail__name">Bedrooms</div>
        <div class="c-card--crea__detail__value">{{listing.beds}}</div>
      </div>
      <div class="c-card--crea__detail">
        <div class="c-card--crea__detail__name">Bathrooms</div>
        <div class="c-card--crea__detail__value">{{listing.baths}}</div>
      </div>
    </div>

    <div class="c-card--crea__more-info c-card--crea--hidden">
      <div class="c-card--crea__detail">
        <div class="c-card--crea__detail__name">Building Type</div>
        <div class="c-card--crea__detail__value">{{listing.buildingType}}</div>
      </div>
      <div class="c-card--crea__detail">
        <div class="c-card--crea__detail__name">Property Type</div>
        <div class="c-card--crea__detail__value">{{listing.propertyType}}</div>
      </div>
      <div class="c-card--crea__detail">
        <div class="c-card--crea__detail__name">Property Taxes/Yr</div>
        <div class="c-card--crea__detail__value">{{listing.propertyTaxes}}</div>
      </div>
      <div class="c-card--crea__detail">
        <div class="c-card--crea__detail__name">Days on Market</div>
        <div class="c-card--crea__detail__value">{{listing.daysOnMarket}}</div>
      </div>

      <div class="c-card--crea__desc">{{listing.desc}}</div>

      <div class="c-card--crea__mls">
        <div class="c-card--crea__mls__detail"><strong>MLS&reg; Number {{listing.MLSnumber}}</strong></div>
        <div class="c-card--crea__mls__detail"><strong>Salesperson</strong> {{listing.salesperson}}</div>
        <div class="c-card--crea__mls__detail"><strong>Brokerage</strong> {{listing.brokerage}}</div>
      </div>

    </div>

    <div class="c-card--crea__actions--show-more">
        {{> button buttonText="Show More" buttonIconId="#icon-plus" buttonModifierClasses="c-card--crea__actions-button c-button--light-on-red c-button--no-border c-button--no-border-radius js-crea-listing-open"}}
    </div>
    <div class="c-card--crea__actions--show-less c-card--crea--hidden">
      <div class="c-card--crea__actions-link-wrapper">
        <a href="#" class="c-card--crea__actions-link">View on realtor.ca</a>
      </div>
      {{> button buttonText="Show Less" buttonIconId="#icon-plus" buttonModifierClasses="c-card--crea__actions-button c-button--light-on-red c-button--no-border c-button--no-border-radius js-crea-listing-close"}}
    </div>

  {{!-- We require different markup for Memeber Benefits thumbnail cards --}}
  {{else ifCond displayType "==" "benefit"}}

    {{#if link}}
      <a href="#" class="c-card__grid c-card__link">
    {{else}}
      <div class="c-card__grid">
    {{/if}}
      <div class="c-card__content">
        {{#if hed}}
          <div class="c-card__hed">
            {{#if indicatorIcon}}
              {{> indicator-icon icon=indicatorIcon }}
            {{/if}}
            <div class="c-card__hed-text">{{ hed }}</div>
          </div>
        {{/if}}
        {{#if dek}}
          <div class="c-card__dek">{{{ dek }}}</div>
        {{/if}}
      </div>
    {{#if link}}
      </a>
    {{else}}
      </div>
    {{/if}}

  {{else}}

    {{#if link}}
      <a href="#" class="c-card__grid c-card__link">
    {{else}}
      <div class="c-card__grid">
    {{/if}}
      <div class="c-card__content">
        {{#if label}}
          <span class="c-card__label{{#if advContent}} c-card__label--muted{{/if}}">
            {{label}}
          </span>
        {{/if}}

        <div class="c-card__hed">
          <div class="c-card__hed-text">{{ hed }}</div>
          {{#if indicatorIcon}}
            {{> indicator-icon icon=indicatorIcon }}
          {{/if}}
          {{#if videoTime}}
            <span class="c-card__video-time">
              {{> indicator-icon icon=videoIcon }}
              <span class="c-card__video-duration">{{videoTime}}</span>
            </span>
          {{/if}}
        </div>
        {{#if dek}}<div class="c-card__dek">{{ dek }}</div>{{/if}}

        {{#ifCond authors "||" timestamp}}
          <div class="c-card__meta">
            {{#if authors~}}
              <div class="c-card__meta__authors">
                {{#each authors}}
                  <span class="c-card__author u-no-wrap">
                    {{~#ifCond ../authors.length ">" 1~}}
                      {{~#if @last~}}
                        and {{this~}}
                      {{~else ifSecondLast @index ../authors.length~}}
                        {{~this~}}
                      {{~else~}}
                        {{~this}},
                      {{~/if~}}
                    {{~else~}}
                      {{~this~}}
                    {{~/ifCond~}}
                  </span>
                {{/each}}
              </div>
            {{/if}}

            {{#if 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>
        {{/ifCond}}
      </div>
      {{#if image}}
        <div class="c-card__media">
          <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>
        </div>
      {{/if}}
    {{#if link}}
      </a>
    {{else}}
      </div>
    {{/if}}
  {{/ifCond}}
</div>
