<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>QT Bike Festival</title>
  <script src="cordova.js"></script>
  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="styles/onsen-css-components-dark-theme.css">

  <link rel="stylesheet" href="styles/app.css"/>
  <script type="text/javascript"src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22feeds%22%2C%22version%22%3A%221.0%22%2C%22nocss%22%3Atrue%7D%5D%7D"></script>

  <!--<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">-->
  <style>

  </style>
  <script src="lib/onsen/js/angular/angular.js"></script>
  <script src="js/angular-resource.min.js"></script>
  <script src="js/angular-sanitize.js"></script>
  <script src="lib/onsen/js/onsenui.js"></script>
  <script src="js/angular-feeds.js"></script>

  <!--<script src="cordova.js"></script>-->
  <script src="js/app.js"></script>
  <script src="js/lbservices.js"></script>
  <script>
    ons.ready(function() {
    });
  </script>


</head>

<body ng-controller="AppController">
  
  <ons-navigator>
    <ons-page>
      <ons-toolbar>
        <div class="center">Bike Festival</div>
      </ons-toolbar>
      <ons-list ng-controller="MasterController">

        <ons-list-item modifier="chevron" class="item" onclick="ons.navigator.pushPage('feed.html', { animation : 'slide' } )">
          <p>The Latest News:</p>
          <feed url="http://www.queenstownbikefestival.com/news/rss" summary="true" count='1' template-url="templates/feed_tpl.html" ></feed>        </ons-list-item>
        <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
          <ons-row>
            <ons-col width="60px">
              <div class="item-thum" ng-if="item.icon !== null">
                <img src="{{item.icon}}" alt="" ng-if="item.icon"/>
              </div>
            </ons-col>
            <ons-col width="60px" class="big_date">
              <div>{{item.date | date : 'MMM'}}</div>
              <span >{{item.date | date : 'd'}}</span>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">{{item.title}} {{item.name}}</span>
                <span class="item-label">{{item.label}}</span>
              </header>
              <p class="item-desc">{{item.desc}}</p>
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-navigator>

  <ons-template id="detail.html">
    <ons-page ng-controller="DetailController">

      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Event Details</div>
      </ons-toolbar>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="item">
          <ons-row>
            <ons-col width="60px">
              <div class="item-thum" ng-if="item.icon">

                <img src="{{item.icon}}" alt="" ng-if="item.icon"/>
              </div>
            </ons-col>
            <ons-col width="60px" class="big_date">
              <div>{{item.date | date : 'MMM'}}</div>
              <span >{{item.date | date : 'd'}}</span>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">{{item.name}}</span>
                <span class="item-label">{{item.label}}</span>
              </header>
            </ons-col>
          </ons-row>
        </ons-list-item>
        <ons-list-item modifier="chevron" ng-if="item.description2" class="item" ng-click="showDesc2('desc')">
          <header>More info  / rules</header>
          <!--<div ng-bind-html="item.description2"></div>-->
        </ons-list-item>
        <ons-list-item ng-if="item.onTheDay" modifier="chevron" class="item" ng-click="showDesc2()">
          <header>On the day</header>
          <!--<div ng-bind-html="item.onTheDay"></div>-->
        </ons-list-item>

        <!--<ons-list-item modifier="chevron" ng-click="doSomething()">-->
          <!--<ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>-->
          <!--Add a note-->
        <!--</ons-list-item>-->
      </ons-list>
      <div class="item-desc" ng-bind-html="item.description"></div>

      <ons-list style="margin-top: 10px">

        <!--<ons-list-item modifier="chevron" ng-if="item.description2" class="item" ng-click="showDesc2()">-->
          <!--<header>Race rules</header>-->
          <!--&lt;!&ndash;<div ng-bind-html="item.description2"></div>&ndash;&gt;-->
        <!--</ons-list-item>-->
        <!--<ons-list-item ng-if="item.onTheDay" modifier="chevron" class="item" ng-click="showDesc2()">-->
          <!--<header>On the day</header>-->
          <!--&lt;!&ndash;<div ng-bind-html="item.onTheDay"></div>&ndash;&gt;-->
        <!--</ons-list-item>-->

        <!--&lt;!&ndash;<ons-list-item class="item" ng-repeat="i in [1,2,3]" modifier="chevron" >&ndash;&gt;-->
          <!--&lt;!&ndash;<header>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="item-title">Lorem ipsum dolor sit amet</span>&ndash;&gt;-->
          <!--&lt;!&ndash;</header>&ndash;&gt;-->
          <!--&lt;!&ndash;<p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>&ndash;&gt;-->
        <!--&lt;!&ndash;</ons-list-item>&ndash;&gt;-->
      </ons-list>

      <br>

    </ons-page>
  </ons-template>


  <ons-template id="desc2.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">More Details</div>
    </ons-toolbar>
    <ons-page ng-controller="Desc2Controller" >

      <div ng-bind-html="stuff" class="info_page"></div>

    </ons-page>

  </ons-template>
  <ons-template id="feed.html">
          <ons-toolbar>
              <div class="left"><ons-back-button>Back</ons-back-button></div>
              <div class="center">News</div>
            </ons-toolbar>
            <ons-page>
              <feed url="http://www.queenstownbikefestival.com/news/rss" summary="false" count='3' template-url="templates/feed_tpl.html"></feed>
            </ons-page>


  </ons-template>
</body>
</html>
