<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" ng-app="cockpit">

<head>
    <!-- Title -->
    <title>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" />
    <link rel="apple-touch-icon" href="./images/icons/projectile-touchicon.png" />

    <!-- 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/jquery.modal/css/jquery.modal.css">

    <link rel="stylesheet" type="text/css" href="./css/gauges.css?v=0.0.14">
    <link rel="stylesheet" type="text/css" href="./css/custom.css?v=0.0.14">

    <!-- 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/jquery.modal/js/jquery.modal.min.js" type="text/javascript"></script>

    <script src="./js/scripts.js?v=0.0.14" type="text/javascript"></script>
    <script src="./js/app/app.js?v=0.0.14" 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">
				<a href="../../start" class="login-desktop-version"><i class="ion-ios-monitor"></i> Desktop version</a>
                <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">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"> 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>
					
					<!-- TimeTracker -->
					<div class="timetracker row">
						<div class="panel-block">
							<div class="panel-description">
								<h3>{{captions.timetracker}}</h3>
								<p></p>
							</div>
							<div class="dates">
								<ul class="list-inline">
									<li><a href="javascript:;" ng-click="getTimeTrackerEntries('-1');"><i class="ion-arrow-left-b"></i> {{captions.prevDay}}</a></li>
									<li><i class="ion-android-calendar"></i> {{captions["day_"+D.getDay()]}} {{D | date:'dd.MM.yyyy'}}</li>
									<li><a href="javascript:;" ng-click="getTimeTrackerEntries('+1');">{{captions.nextDay}} <i class="ion-arrow-right-b"></i></a></li>
								</ul>
							</div>
							<div class="table-holder">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th style="width: 100px;">{{captions.from}}</th>
											<th style="width: 100px;">{{captions.to}}</th>
											<th style="width: 100px;">{{captions.duration}}</th>
											<th>{{captions.package}}</th>
											<th>{{captions.note}}</th>
											<th style="width: 30px; min-width: 0"><i class="ion-android-remove-circle text-muted"></i></th>
										</tr>
									</thead>
									<tbody>
										<tr ng-repeat="timebit in timebits" timebit-directive>
											<td><input type="time" name="start" class="form-control" ng-value="timebit.start"></td>
											<td><input type="time" name="end" class="form-control" ng-value="timebit.end"></td>
											<td><input type="text" name="duration" class="form-control" ng-value="timebit.duration | ptToTime"></td>
											<td><select name="package" class="form-control"><option value=""></option><option ng-repeat="package in packages" value="{{package.job}}" ng-selected="package.job == timebit.job">{{package.job}} {{package.description}}</option></select></td>
											<td><input type="text" name="note" class="form-control" value="{{timebit.note}}"></td>
											<td><a href="javascript:;" ng-click="removeTimebit($event, timebit)" ng-hide="!timebit.id"><i class="ion-android-remove-circle"></i></a></td>
										</tr>
									</tbody>
								</table>
							</div>
							<a href="javascript:;" class="btn btn-success" ng-click="saveTimebits($event)"><i class="ion-checkmark"></i> {{captions.save}}</a>
						</div>
					</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}} - {{captions["day_"+date.getDay()]}} {{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 + ' ' + captions["day_"+Appointments.tillDate.getDay()] : ''}} {{Appointments.tillDate | date:'dd.MM.yyyy'}}</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>
