<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" ng-app="cockpit">
    <head>
        <!-- Title -->
        <title>Projectile Cockpit</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="">
      
        <!-- Favicon -->
        <link rel="shortcut icon" href="./images/icons/favicon.ico"/>
        
        <!-- Stylesheets -->
        <link rel="stylesheet" type="text/css" href="./css/reset/reset.css">
		<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="./bower_components/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="./bower_components/xpull/xpull.css">
		<link rel="stylesheet" href="./bower_components/jquery.modal/css/jquery.modal.css">
		
        <link rel="stylesheet" type="text/css" href="./css/gauges.css?v=0.0.8">
        <link rel="stylesheet" type="text/css" href="./css/custom.css?v=0.0.8">
        
        <!-- Scripts -->
		<script src="./bower_components/jquery/jquery.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="./bower_components/xpull/xpull.js" type="text/javascript"></script>
        <script src="./bower_components/jquery.modal/js/jquery.modal.min.js" type="text/javascript"></script>
      
        <script src="./js/scripts.js?v=0.0.8" type="text/javascript"></script>
		<script src="./js/app/app.js?v=0.0.8" type="text/javascript"></script>
		
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
  
    <body ng-controller="MainController" ng-class="{'login-bg': !auth.loggedIn}">
		
		<!-- Pages -->
		<div class="pages" style="display:none">
			
			<!-- Login Page -->
			<div id="view-login" class="page page-login" ng-show="!auth.loggedIn">
				<div class="container">
					<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()" class="login-form">
							<div class="row">
								<div class="form-group">
									<div class="col-xs-12">
										<input type="text" name="username" ng-model="login_username" placeholder="Login" autocapitalize="off" autocorrect="off" class="form-control input-with-icon" style="margin-bottom: 10px"><i class="ion-person"></i>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input type="password" name="password" ng-model="login_password" placeholder="Password" class="form-control input-with-icon" /><i class="ion-locked"></i>
									</div>
								</div>
								<div class="form-group text-center">
									<div class="col-xs-8 col-xs-offset-2">
										<input type="submit" class="btn btn-default btn-block" value="Go">
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="page-login-overlay"></div>
					<div class="page-login-bg"></div>
				</div>
			</div>

			<!-- Home Page -->
			<div id="view-home" class="page page-home" ng-show="auth.loggedIn">
				
				<!-- Header -->
				<div class="header">
					<div class="header-fixed">
						<div class="container">
							<div class="row">
								<div class="col-xs-10 text-left">
									<a href="javascript:window.location.reload();" title="{{captions.refresh}}" style="color: #fff"><img src="./images/icons/projectile_logo_white.png" class="logo"> Projectile Cockpit</a>
								</div>
								<div class="col-xs-2 text-right">
									<a href="javascript:;" class="link icon-only logout-button" ng-click="action_logOut()" title="{{captions.logout}}"><i class="icon ion-android-exit"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>

					<!-- Container -->
					<div class="page-content hide-bars-on-scroll pull-to-refresh-content" data-ptr-distance="75">
						<div class="container">
							<!-- Watchers -->
							<div class="gauges row">
								<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="gauge-image">
												<!-- [Marks] Values Text -->
												<div class="gauge-values row">
													<div class="gauge-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: 0; background-color: {{watcher.colors[$index]}}; z-index: {{watcher.marks.length - $index}};"></div>
												</div>

												<!-- [Current Mark] Current Mark-->
												<div class="gauge-values gauge-values-bottom row">
													<div class="gauge-values-height">0</div>
													<span class="gauge-value-style-1 gauge-value-tick" style="left: {{watcher.currentPosition }}%; z-index: {{watcher.marks.length}}">{{watcher.currentMark}}</span>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>

							<!-- Calendar -->
							<div class="appointments row">
								<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}} - {{date | date:'dd.MM.yyyy'}}</div>
											<ul class="appointments-group-list">
												<li class="appointment-item" ng-repeat="today in Appointments.today | orderBy: 'start'">
													<span class="appointment-item-icon"><i class="{{today.icon}}"></i></span>
													<span class="appointment-item-title">
														<i class="appointment-time">{{today.timeInterval}}</i>
														<br ng-if="today.timeInterval.length > 0">
														<i class="appointment-name" ng-class="{'breaked': today.timeInterval.length > 0}">{{today.description}}</i>
													</span>
												</li>
											</ul>
										</div>
										<div class="appointments-group">
											<div class="appointments-group-title">{{captions.nextDays}} {{Appointments.tillDate ? captions.to : ''}} {{Appointments.tillDate}}</div>
											<ul class="appointments-group-list">
												<li class="appointment-item" ng-repeat="nextday in Appointments.next | orderBy: 'start'">
													<span class="appointment-item-icon"><i class="{{nextday.icon}}"></i></span>
													<span class="appointment-item-title">
														<i class="appointment-time">{{nextday.timeInterval}}</i>
														<br ng-if="nextday.timeInterval.length > 0">
														<i class="appointment-name" ng-class="{'breaked': nextday.timeInterval.length > 0}">{{nextday.description}}</i>
													</span>
												</li>
											</ul>
											<div class="show-more-appointments"><a href="javascript:;" ng-click="showMoreAppointments($event)"><i class="ion-ios-loop-strong loader loading"></i> {{captions.showMoreDays}}</a></div>
										</div>
									</div>
								</div>
							</div>

							<!-- Contacts -->
							<div class="contacts row">
								<div class="panel-block">
									<div class="panel-description">
										<h3>{{captions.contacts}}</h3>
										<p></p>
									</div>
									<div class="contacts-search">
										<div class="form-group item-input">
											<i class="ion-search"></i>
											<i class="ion-ios-loop-strong loader"></i>
											<input type="text" placeholder="{{captions.search | ucfirst}}..." class="input-search-contacts form-control" ng-model="searchContactsInput" ng-keyup="search_contacts_action($event)">
											<a ng-click="search_contacts_action({keyCode: 13, _forced: true})" class="btn btn-default">{{captions.search | ucfirst}}</a>
										</div>
									</div>
									<hr>
									<ul class="contacts-list">
										<li ng-repeat="contact in Contacts">
											<div class="contact-item">
												<div class="contact-icon"><i ng-class="{'ion-person': contact.isContact, 'ion-briefcase': contact.isCompany}"></i></div>
												<div class="contact-information">
													<h5>{{contact.name}}</h5>
													<ul>
														<li ng-show="contact.address" class="contact-information-addess"><!--<span class="span">{{captions.address}}:</span> --><span class="value"><a href="http://maps.google.com/?q={{contact.address}}" target="_blank">{{contact.address}}</a></span></li>
														<li ng-show="contact.function"><span class="span">{{captions.function}}:</span> <span class="value">{{contact.function}}</span></li>
														<li ng-show="contact.mobile"><span class="span">{{captions.mobile}}:</span> <span class="value"><a href="tel://{{contact.phone}}" class="no-link">{{contact.phone}}</a></span></li>
														<li ng-show="contact.phone"><span class="span">{{captions.phone}}:</span> <span class="value"><a href="tel://{{contact.phone}}" class="no-link">{{contact.phone}}</a></span></li>
														<li ng-show="contact.email"><span class="span">{{captions.email}}:</span> <span class="value"><a href="mailto:{{contact.email}}" target="_blank">{{contact.email}}</a></span></li>
														<li ng-show="contact.website"><span class="span">{{captions.website}}:</span> <span class="value"><a href="//{{contact.website}}" target="_blank">{{contact.website}}</a></span></li>
													</ul>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
    </body>
</html>