<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" ng-app="cockpit">
    <head>
        <!-- Title -->
        <title>Cockpit 0.0.1 | Projectile</title>
      
        <!-- Metas -->
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta name="description" content="">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
      
        <!-- Favicon -->
        <link rel="shortcut icon" href="./images/icons/favicon.ico"/>
        
        <!-- Stylesheets -->
		<link rel="stylesheet" href="./bower_components/framework7/dist/css/framework7.ios.min.css">
		<link rel="stylesheet" href="./bower_components/framework7/dist/css/framework7.ios.colors.min.css">
		<link rel="stylesheet" href="./bower_components/ionicons/css/ionicons.min.css">
        <link rel="stylesheet" type="text/css" href="./css/guages.css?v=0.0.1">
        <link rel="stylesheet" type="text/css" href="./css/custom.css?v=0.0.1">
        
        <!-- Scripts -->
        <script src="./bower_components/framework7/dist/js/framework7.min.js" type="text/javascript"></script>
        <script src="./bower_components/angular/angular.min.js" type="text/javascript"></script>
        <script src="./bower_components/angular-sanitize/angular-sanitize.min.js" type="text/javascript"></script>
      
        <script src="./js/scripts.js?v=0.0.1" type="text/javascript"></script>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
  
    <body ng-controller="MainController">        
		<div class="statusbar-overlay"></div>
		<div class="panel-overlay"></div>
		<!-- Views -->
		<div class="views">
			<div class="view view-main" style="display: none;">

				<!-- Login Page -->
				<div data-page="index" class="page page-login" ng-show="!auth.loggedIn">
					<div class="page-content page-login-content">
						<div class="login-screen-logo"><a href="javascript:window.location.reload();"><img src="./images/icons/projectile_logo_ios.png"></a></div>
						<div class="login-screen-title">Projectile Cockpit</div>
						<form ng-submit="action_logIn()">
							<div class="list-block inset">
								<ul>
									<li class="item-content">
										<div class="item-media"><i class="ion-ios-person-outline"></i></div>
										<div class="item-inner">
											<div class="item-input">
												<input type="text" name="username" ng-model="login_username" placeholder="Username" />
											</div>
										</div>
									</li>
									<li class="item-content">
										<div class="item-media"><i class="ion-ios-locked-outline"></i></div>
										<div class="item-inner">
											<div class="item-input">
												<input type="password" name="password" ng-model="login_password" placeholder="Password" />
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="list-block inset">
								<ul>
									<li><a href="#" class="item-link list-button" ng-click="action_logIn()">Sign In</a></li>
								</ul>
							</div>
							<input type="submit" style="display: none">
						</form>
					</div>
					<div class="page-login-overlay"></div>
					<div class="page-login-bg"></div>
				</div>
				
				<!-- Home Page -->
				<div data-page="index" class="page navbar-fixed toolbar-fixed" ng-show="auth.loggedIn">

					<!-- Top Navbar -->
					<div class="navbar">
						<div class="navbar-inner">
							<div class="center"><a href="javascript:window.location.reload();"><img src="./images/icons/projectile_logo_white.png" class="logo"></a> Projectile Cockpit</div>
						</div>
					</div>

					<!-- Container -->
					<div class="page-content hide-bars-on-scroll pull-to-refresh-content" data-ptr-distance="75">
						<!-- Pull to refresh layer -->
						<div class="pull-to-refresh-layer">
							<div class="preloader"></div>
							<div class="pull-to-refresh-arrow"></div>
						</div>

						<div class="content-block">
							<!-- Watchers -->
							<div class="guages">
								<ul>
									<li ng-repeat="watcher in watchers">
										<div class="panel-block">
											<div class="panel-description">
												<h3>{{watcher.title}}</h3>
												<p>{{watcher.text}}</p>
											</div>
											<div class="guage-image">
												<!-- [Marks] Values Text -->
												<div class="guage-values row">
													<div class="guage-values-height" data-info="DO NOT TOUCH THIS ELEMENT">0</div>
													
													<span ng-repeat="mark in watcher.marks" style="left: {{watcher.positions[$index]}}%; color: {{watcher.colors[$index]}}" ng-class="{'last1':$last}">{{mark}}</span>
												</div>
												
												<!-- [Positions] Progress Bars -->
												<div class="progress">
													<div ng-repeat="position in watcher.positions" class="progress-bar progress-bar-stripe progress-bar-label" style="width: {{watcher.widths[$index]}}%; left: {{position}}%; background-color: {{watcher.colors[$index]}}; z-index: {{watcher.marks.length - $index}};"></div>
												</div>
												
												<!-- [Current Mark] Current Mark-->
												<div class="guage-values guage-values-bottom row">
													<div class="guage-values-height">0</div>
													<span class="guage-value-style-1 guage-value-tick" style="left: {{watcher.currentPosition }}%; z-index: {{watcher.marks.length}}">{{watcher.currentMark}}</span>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>

							<!-- Calendar -->
							<div class="appointments">
								<div class="panel-block">
									<div class="panel-description">
										<h3>{{captions.appointments}}</h3>
										<p></p>
									</div>
									<div class="appointments-groups">
										<div class="appointments-group">
											<div class="appointments-group-title">{{captions.today}}</div>
											<ul class="appointments-group-list">
												<li class="appointment-item" ng-repeat="today in appointments.today">
													<span class="appointment-item-icon"><i class="{{today.icon}}"></i></span>
													<span class="appointment-item-title"><i class="appointment-time">{{today.startTime + (today.endTime ? ' - ' + today.endTime : '')}}</i> - <i class="appointment-name">{{today.description}}</i></span>
												</li>
											</ul>
										</div>
										<div class="appointments-group">
											<div class="appointments-group-title">{{captions.nextDays}}</div>
											<ul class="appointments-group-list">
												<li class="appointment-item" ng-repeat="nextday in appointments.next">
													<span class="appointment-item-icon"><i class="{{nextday.icon}}"></i></span>
													<span class="appointment-item-title"><i class="appointment-time">{{nextday.startTime + (nextday.endTime ? ' - ' + nextday.endTime : '')}}</i> - <i class="appointment-name">{{nextday.description}}</i></span>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Bottom Bar -->
					<div class="toolbar tabbar tabbar-labels">
						<div class="toolbar-inner">
							<a href="#tab1" class="tab-link" ng-click="action_reload($event)">
								<i class="icon ion-ios-reload"></i>
								<span class="tabbar-label">Refresh</span>
							</a>
							<a href="#tab1" class="tab-link" ng-click="action_logOut()">
								<i class="icon ion-ios-locked-outline"></i>
								<span class="tabbar-label">Log out</span>
							</a>
						</div>
					</div>

				</div>
				
			</div>
		</div>
		
		<script src="./js/app/app.js?v=0.0.1" type="text/javascript"></script>
    </body>
</html>