<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Template7 Page</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block block-strong">
      <p>This page was loaded and compiled with Template7 template engine.</p>
    </div>
    <div class="block-title">Route Context</div>
    <div class="block block-strong">
      <p>Context can be passed in route options</p>
      <ul>
        <li>foo: {{foo}}</li>
      </ul>
    </div>
    <div class="block-title">Extended Context</div>
    <div class="block block-strong">
      <p>Template7 page context is extended with some additional variables.</p>

      <h4>$route</h4>
      <p>Contains properties of the current route:</p>
      <ul style="padding-left:25px;word-wrap:break-word;">
        <li><b>$route.url</b>: {{$route.url}}</li>
        <li><b>$route.path</b>: {{$route.path}}</li>
        <li><b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
        <li><b>$route.hash</b>: {{$route.hash}}</li>
        <li><b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
        <li><b>$route.context</b>: {{js 'return JSON.stringify(this.$route.context)'}}</li>
      </ul>

      <h4>$root</h4>
      <p>Root app data:</p>
      <ul style="padding-left:25px">
        <li><b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
        <li><b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
      </ul>

      <h4>$theme</h4>
      <p>Currently active theme:</p>
      <ul style="padding-left:25px">
        <li><b>$theme.ios</b>: {{$theme.ios}}</li>
        <li><b>$theme.md</b>: {{$theme.md}}</li>
      </ul>
    </div>
  </div>
</div>
