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

    p { font-weight: bold; }
  </style>
  <view>
    <can-import from="can-stache-route-helpers" />
    <div class="homepage">
      <img src="{{joinBase('node_modules/place-my-order-assets/images/homepage-hero.jpg')}}"
          alt="Restaurant table with glasses." width="250" height="380" />
      <h1>Ordering food has never been easier</h1>
      <p>
        We make it easier than ever to order gourmet food
        from your favorite local restaurants.
      </p>
      <p>
        <a class="btn" href="{{routeUrl(page='restaurants')}}" role="button">Choose a Restaurant</a>
      </p>
    </div>
  </view>
  <script type="view-model">
    import { DefineMap } from 'can';

    export default DefineMap.extend("PmoHomeVM", {
      // 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-home component" },

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

      // 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>
