<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ionic List Example</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- ionic css -->
    <link href="/dist/css/ionic.css" rel="stylesheet">

    <!-- ionic/angularjs scripts -->
    <script src="/dist/js/ionic.js"></script>
    <script src="/dist/js/angular/angular.js"></script>
    <script src="/dist/js/angular/angular-animate.js"></script>
    <script src="/dist/js/angular/angular-route.js"></script>
    <script src="/dist/js/angular/angular-touch.js"></script>
    <script src="/dist/js/angular/angular-sanitize.js"></script>
    <script src="/dist/js/ionic-angular.js"></script>

    <!-- your app's script -->
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
  </head>

  <!-- 'listExample' is the name of this angular module (app.js)-->
  <body ng-app="listExample">

    <!-- Our navigation router with some animations set -->
    <pane nav-router animation="slide-left-right-ios7">
      <!-- The nav bar that will be updated as we navigate -->
      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>

      <!-- where the content of each page will be rendered -->
      <ng-view></ng-view>
    </pane>


    <!-- 
      Belows are examples of using inline angular templates:
      http://docs.angularjs.org/api/ng.directive:script
    -->
    
    <!--
      This template loads when the the root '/' url is matched (app.js)
      'movies' is a $scope variable which was created in MovieIndexCtrl (controllers.js)
      The MovieIndexCtrl gets data from the MovieService (service.js)
    -->
    <script type="text/ng-template" id="/index.html">
      <nav-page title="title">
        <content has-header="true">
          
          <list>
            <link-item ng-repeat="movie in movies" href="#/movie/{{movie.id}}" type="item-link">
              {{ movie.title }}
            </item>
          </list>
          
        </content>
      </nav-page>
    </script>
    
    <!--
      This template loads when the '/movie/:movieId' url is matched (app.js)
      'movie' is a $scope variable which was created in MovieDetailCtrl (controllers.js)
      The MovieDetailCtrl gets data from the MovieService (service.js)
    -->
    <script type="text/ng-template" id="/movie.html">
      <nav-page title="title">
        <content has-header="true" padding="true">
          <h1>{{ movie.title }}</h1>
          <dl>
            <dt>Description:</dt>
            <dd>{{ movie.description }}</dd>
          </dl>
          <dl>
            <dt>Released:</dt>
            <dd>{{ movie.released }}</dd>
          </dl>
          <dl>
            <dt>Director:</dt>
            <dd>{{ movie.director }}</dd>
          </dl>
          <dl>
            <dt>Rating:</dt>
            <dd>{{ movie.rating }}</dd>
          </dl>
        </content>
      </nav-page>
    </script>


  </body>
</html>