<can-component tag="pmo-restaurant-details">
  <style type="less">
    display: block;

    p { font-weight: bold; }
  </style>
  <view>
    <can-import from="~/models/restaurant" />
    <can-import from="can-stache-route-helpers" />
    {{#if(this.restaurantPromise.isPending)}}
      <div class="loading"></div>
    {{else}}
      {{let restaurant=this.restaurantPromise.value}}
      <div class="restaurant-header"
          style="background-image: url({{joinBase(restaurant.images.banner)}});">
        <div class="background">
          <h2>{{restaurant.name}}</h2>

          {{let addr=restaurant.address}}
          {{#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>

          <br />
        </div>
      </div>

      <div class="restaurant-content">
        <h3>The best food this side of the Mississippi</h3>

        <p class="description">
          <img src="{{joinBase(restaurant.images.owner)}}" />
          Description for {{restaurant.name}}
        </p>
        <p class="order-link">
          <a class="btn" href="{{routeUrl(page='restaurants' slug=restaurant.slug action='order')}}">
            Order from {{restaurant.name}}
          </a>
        </p>
      </div>
    {{/if}}
  </view>
  <script type="view-model">
    import { DefineMap } from 'can';
    import Restaurant from '~/models/restaurant';

    export default DefineMap.extend("PmoRestaurantDetailsVM", {
      // EXTERNAL STATEFUL PROPERTIES
      // These properties are passed from another component. Example:
      // value: {type: "number"}

      // INTERNAL STATEFUL PROPERTIES
      // These properties are owned by this component.
      message: { default: "This is the pmo-restaurant-details component" },

      // DERIVED PROPERTIES
      // These properties combine other property values. Example:
      // get valueAndMessage(){ return this.value + this.message; }
      get restaurantPromise() {
        return Restaurant.get({ _id: this.slug });
      },

      // METHODS
      // Functions that can be called by the view. Example:
      // incrementValue() { this.value++; }

      // SIDE EFFECTS
      // The following is a good place to perform changes to the DOM
      // or do things that don't fit in to one of the areas above.
      connectedCallback(element){

      }
    });
  </script>
</can-component>
