<div class="c-card--crea__image">
  <div class="c-image-container">
    <img class="c-image" src="http://placehold.it/300x400" 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__brokerage-text">{{listing.brokerage}}</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>Listing ID</strong> {{listing.MLSnumber}}</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>
