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

    <ion-header-bar class="bar-stable">
        <a class="button icon-left ion-chevron-left button-clear button-dark" on-tap="goToMain()" ng-class="{hidden : stateChanged}">{{'GoBack' | translate}}</a>
        <a class="button icon-left ion-chevron-left button-clear button-dark ng-hide" on-tap="goToMain()" ng-show="stateChanged" ng-class="{hidden : !stateChanged}">{{'Abort' | translate}}</a>

        <h2 class="title">{{'TileSettings' | translate}}</h2>

        <a class="button button-clear button-dark ng-hide" on-tap="save(tile)" ng-show="stateChanged" ng-class="{hidden : !stateChanged}">{{'save_cap' | translate}}</a>
    </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 | limitTo: 27)+(tile.name.length > 27 ? '...' : '')}}</h2>
                        <h2 class="ng-hide" ng-show="!isIPad" data-fittext>{{(tile.name | limitTo: 33)+(tile.name.length > 33 ? '...' : '')}}</h2>
                    </div>
                    <ng-include src="'img/tiles/'+ tile.tileType +'.svg'"></ng-include>
                </div>
            </div>
        </div>

        <div class="list">
            <span class="item item-icon-right main-color main-settings">
                <span>
                    {{'ShowShortcutOnHomescreen' | translate}}
                </span>
                <label class="toggle toggle-balanced" ng-class="{'toggle-small':isAndroid}">
                    <input type="checkbox" ng-model="switchShortcutState" ng-change="changeSwitchShortcutState()">

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

        <div class="underlink">{{'Visible' | translate}}</div>
        <div class="underlink no-margins">{{'TheTileOnHomeScreen' | translate}}</div>
        <div class="underlink no-margins">{{'TurnOffVisibleTileDisappears' | translate}}</div>


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