<ion-view hide-back-button="true" view-title="{{'DeviceTileSettings' | translate}}" ng-class="{'white-pane':isAndroid}">
    <ion-nav-bar class="bar-stable">
        <ion-nav-buttons side="left">
            <a nav-direction="back" on-tap="goBack()" class="button icon-left ion-chevron-left button-clear button-dark ng-hide" ng-show="!isIPad && !isAndroid && !tileChanged" ng-class="{hidden : tileChanged}">{{'GoBack' | translate}}</a>
            <a nav-direction="back" on-tap="goBack()" class="button button-clear ng-hide" ng-show="isEdited && !isAndroid && tileChanged">{{'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 on-tap="save(tile)" class="button button-clear ng-hide" ng-show="isEdited && !isAndroid  && tileChanged">{{'save_cap' | translate}}</a>
            <a class="button icon-right ion-android-done button-clear button-dark ng-hide" on-tap="save(tile)" ng-show="isEdited && isAndroid && tileChanged"></a>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-header-bar class="bar-stable" ng-if="modalShown">
        <a class="button icon-left ion-chevron-left button-clear button-dark" on-tap="goToFound()">{{'GoBack' | translate}}</a>

        <h2 class="title">{{'AddNewSwitch' | translate}}</h2>
    </ion-header-bar>

    <!--<ion-header-bar class="bar-stable">-->
    <!--<a class="button icon-left ion-chevron-left button-clear button-dark" on-tap="goToFound()">Back</a>-->
    <!--<h2 class="title">Add new Switch</h2>-->
    <!--</ion-header-bar>-->

    <ion-content has-bouncing="false" class="has-header">
        <div class="tile-container" style="width: 60%;padding: 5%" ng-init="tile.tileType = (tile.deviceTypeId | icon)">
            <div class="tile" style="background: white" ng-class="{'tile-shadow':isAndroid}">
                <div class="tile-content">
                    <div class="name-container">
                        <h2 class="ng-hide" ng-show="isIPad" data-fittext>{{tile.name.length > 0 ? ((tile.name | limitTo: 27)+(tile.name.length > 27 ? '...' : '')) : (('EnergySwitch' | translate) + (energyNameCount > 0 ? ' ' + (energyNameCount+1) : ''))}}</h2>
                        <h2 class="ng-hide" ng-show="!isIPad" data-fittext>{{tile.name.length > 0 ? ((tile.name | limitTo: 33)+(tile.name.length > 33 ? '...' : '')) : (('EnergySwitch' | translate) + (energyNameCount > 0 ? ' ' + (energyNameCount+1) : ''))}}</h2>
                    </div>
                    <ng-include src="'img/tiles/'+ tile.tileType +'.svg'"></ng-include>
                </div>
            </div>
        </div>

        <div class="list tile-edit">
            <a class="item item-icon-right firmware" ng-if="tile.newFirmwareAvailable" on-tap="goToSwitchUpgrade()">
                {{'NewFirmwareAvailable' | translate}}
                <i class="icon ion-chevron-right chevron-icon ng-hide" ng-show="!isAndroid"></i>
                <i class="icon ion-android-arrow-forward icon-right ng-hide" ng-show="isAndroid"></i>
            </a>
            <a class="item item-icon-right main-color" on-tap="goToEditName(tile.id)">
                {{'Name' | translate}}
                <span class="item-note ng-hide" ng-show="isIPad" ng-bind="((tile.name | limitTo: 37)+(tile.name.length > 37 ? '...' : '')) || (('EnergySwitch' | translate) + (energyNameCount > 0 ? ' ' + (energyNameCount+1) : ''))"></span>
                <span class="item-note ng-hide" ng-show="!isIPad && !isAndroid" ng-bind="((tile.name | limitTo: 24)+(tile.name.length > 24 ? '...' : '')) || (('EnergySwitch' | translate) + (energyNameCount > 0 ? ' ' + (energyNameCount+1) : ''))"></span>
                <div class="item-note ng-hide" ng-show="isAndroid" ng-bind="((tile.name | limitTo: 24)+(tile.name.length > 24 ? '...' : '')) || (('EnergySwitch' | translate) + (energyNameCount > 0 ? ' ' + (energyNameCount+1) : ''))"></div>
                <i class="icon ion-chevron-right chevron-icon ng-hide" ng-show="!isAndroid"></i>
            </a>
            <a class="item item-icon-right main-color" on-tap="goToEditIcon(tile.id)">
                {{'Icon' | translate}}
                <span class="item-note ng-hide" ng-show="!isAndroid">{{tile.deviceTypeId | iconName | translate}}</span>
                <div class="item-note ng-hide" ng-show="isAndroid">{{tile.deviceTypeId | iconName | translate}}</div>
                <i class="icon ion-chevron-right chevron-icon ng-hide" ng-show="!isAndroid"></i>
            </a>
            <span class="item item-icon-right main-color main-settings">
                <span>
                    {{'BlockSwitchingOff' | translate}}
                </span>
                <label class="toggle toggle-balanced" ng-class="{'toggle-small':isAndroid}">
                    <input type="checkbox" ng-model="tile.blockSwitchingOff">

                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </span>
        </div>

        <div class="underlink tile-edit">
            <div>{{'BlockDescriptionTitle' | translate}}</div>
            <div>{{'BlockDescription' | translate}}</div>
        </div>

        <div class="buttons-block inline">
            <a class="button button-block button-dark ng-hide" on-tap="delete()" ng-show="isEdited">
                {{'DeleteSwitch' | translate}}
            </a>
            <a class="button button-block button-positive ng-hide" on-tap="register()" ng-hide="isEdited">
                {{'Continue' | translate}}
            </a>
        </div>

    </ion-content>
</ion-view>