<can-import from="can-stache-route-helpers" />

<div class="restaurants">
  <h2 class="page-header">Restaurants</h2>
  {{#if(this.restaurants.isPending)}}
    <div class="restaurant loading"></div>
  {{/if}}

  {{#if(this.restaurants.isResolved)}}
    {{#for(restaurant of this.restaurants.value)}}
      {{let addr=restaurant.address}}

      <div class="restaurant">
        <img src="{{joinBase(restaurant.images.thumbnail)}}"
          width="100" height="100">
        <h3>{{restaurant.name}}</h3>
        
        {{#if(addr)}}
        <div class="address">
          {{addr.street}}<br />{{addr.city}}, {{addr.state}} {{addr.zip}}
        </div>
        {{/if}}

        <div class="hours-price">
          $$$<br />
          Hours: M-F 10am-11pm
          <span class="open-now">Open Now</span>
        </div>

        <a class="btn" href="{{routeUrl(page='restaurants' slug=restaurant.slug)}}">
          Details
        </a>
        <br />
      </div>
    {{/for}}
  {{/if}}
</div>
