<remove-header-line></remove-header-line>
<ion-view hide-back-button="true" view-title="{{'Time' | translate}}" ng-class="{'white-pane':(isAndroid || (isIOS && !isIPad))}">
    <ion-nav-buttons side="left">
        <a class="button icon-left ion-chevron-left button-clear button-dark ng-hide" on-tap="goBack()" ng-show="!isAndroid && !scheduler.changed" ng-class="{hidden : scheduler.changed}">{{'GoBack' | translate}}</a>
        <a class="button button-clear button-dark ng-hide" on-tap="goBack()" ng-show="!isAndroid && scheduler.changed">{{'Abort' | translate}}</a>
        <a class="button icon-left ion-android-arrow-back button-clear button-dark ng-hide" on-tap="goBack()" ng-show="isAndroid"></a>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <a class="button button-clear button-dark ng-hide" on-tap="saveScheduler()" ng-show="!isAndroid && scheduler.changed">{{'save_cap' | translate}}</a>
        <a class="button icon-right ion-android-done button-clear button-dark ng-hide" on-tap="saveScheduler()" ng-show="isAndroid && scheduler.changed"></a>
    </ion-nav-buttons>

    <ion-header-bar class="bar-stable" ng-if="isIPad">
        <div class="buttons">
            <a class="button button-clear button-dark ng-hide" on-tap="goBack()" ng-show="scheduler.changed">{{'Abort' | translate}}</a>
            <a class="button icon-left ion-chevron-left button-clear button-dark ng-hide" on-tap="goBack()" ng-show="!scheduler.changed" ng-class="{hidden : scheduler.changed}">{{'GoBack' | translate}}</a>
        </div>
        <h2 class="title">{{'Time' | translate}}</h2>

        <div class="buttons">
            <a class="button button-clear button-dark ng-hide" on-tap="saveScheduler()" ng-show="scheduler.changed">{{'save_cap' | translate}}</a>
        </div>
    </ion-header-bar>

    <ion-content has-bouncing="false" scroll="true" class="plan-content">

        <div class="plan-background">
            <div class="week-day">
                <div class="week" ng-class="{ active : weekType}" on-tap="setWeekType()">{{'scheduler_week' | translate}}</div>
                <div class="day" ng-class="{ active : dayType}" on-tap="setDayType()">{{'scheduler_days' | translate}}</div>
            </div>
            <ul class="days ng-hide main-color" ng-show="dayType">
                <li on-tap="setDay('mon')">
                    <div ng-class="{ active : day=='mon'}">{{'day_short_monday' | translate}}</div>
                </li>
                <li on-tap="setDay('tue')">
                    <div ng-class="{ active : day=='tue'}">{{'day_short_tuesday' | translate}}</div>
                </li>
                <li on-tap="setDay('wed')">
                    <div ng-class="{ active : day=='wed'}">{{'day_short_wednesday' | translate}}</div>
                </li>
                <li on-tap="setDay('thu')">
                    <div ng-class="{ active : day=='thu'}">{{'day_short_thursday' | translate}}</div>
                </li>
                <li on-tap="setDay('fri')">
                    <div ng-class="{ active : day=='fri'}">{{'day_short_friday' | translate}}</div>
                </li>
                <li on-tap="setDay('sat')">
                    <div class="weekend" ng-class="{ active : day=='sat'}">{{'day_short_saturday' | translate}}</div>
                </li>
                <li on-tap="setDay('sun')">
                    <div class="weekend" ng-class="{ active : day=='sun'}">{{'day_short_sunday' | translate}}</div>
                </li>
            </ul>
            <div class="scheduler">
                <scheduler data="schedulerData" redraw="scheduler.show" on-text="'TarifPeakOn' | translate" off-text="'TarifPeakOff' | translate" on-color="'#bbbbbb'" off-color="'#12aaff'"></scheduler>
            </div>
            <div class="buttons-block text-center ng-hide" ng-show="!isAndroid">
                <div class="button-clear-schedule" on-tap="clearScheduler()">
                    <ng-include src="'img/trash.svg'"></ng-include>
                    <span class="main-color">{{'ClearPeakTimes' | translate}}</span>
                </div>
            </div>
        </div>
        <div class="buttons-block text-center ng-hide" ng-show="isAndroid">
                <div class="button-clear-schedule" on-tap="clearScheduler()">
                    <ng-include src="'img/trash.svg'"></ng-include>
                    <span class="main-color">{{'ClearPeakTimes' | translate}}</span>
                </div>
            </div>
    </ion-content>
</ion-view>