<html ng-app="ionic.weather">
  <head>
    <meta charset="utf-8">
    <title>Weather</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/dist/css/ionic.css">

    <link rel="stylesheet" href="weather.css">

    <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-resource.js"></script>
    <script src="/dist/js/angular/angular-touch.js"></script>
    <script src="/dist/js/angular/angular-sanitize.js"></script>
    <script src="/dist/js/angular-ui/angular-ui-router.js"></script>
    <script src="/dist/js/ionic-angular.js"></script>

    <script src="services.js"></script>
    <script src="directives.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="WeatherCtrl">
    <pane>
      <div id="bg-image" ng-style="getActiveBackgroundImage()"></div>

      <header id="header" class="bar bar-header bar-clear">
        <h1 class="title">
          <span class="city">{{current.display_location.city}}</span><br>
          <current-time localtz="current.local_tz_short"></current-time>
        </h1>
      </header>
      <content padding="true">
        <small-weather>
          <h5>{{current.weather}}</h5>
          <h5>H: {{forecast.forecastday[0].high.fahrenheit}} L: {{forecast.forecastday[0].low.fahrenheit}}</h5>
          <h1 class="current-temp">{{current.temp_f | int}}&deg;</h1>
        </small-weather>
        <weather-box title="Forecast" style="height: 400px">
          <h2>This is just a demo...</h2>
        </weather-box>
        <weather-box title="Details" style="height: 400px">
          <h2>This is just a demo...</h2>
        </weather-box>
      </content>
    </pane>
  </body>
</html>
