<ion-view view-title="{{'Icon' | translate}}">
    <ion-nav-bar class="bar-stable">
        <ion-nav-buttons side="left">
            <a class="button icon-left ion-chevron-left button-clear button-dark ng-hide" on-tap="backToEdit(false)" ng-show="!editing && !isAndroid" ng-class="{'hidden':editing}">{{'GoBack' | translate}}</a>
            <a class="button button-clear button-dark ng-hide" on-tap="backToEdit(false)" ng-show="editing && !isAndroid">{{'Abort' | translate}}</a>
            <a class="button icon-left ion-android-arrow-back button-clear button-dark ng-hide" on-tap="backToEdit(false)" ng-show="isAndroid"></a>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <a class="button button-clear button-dark ng-hide" on-tap="backToEdit(true)" ng-show="editing && !isAndroid">{{'save_cap' | translate}}</a>
            <a class="button icon-left ion-android-done button-clear button-dark ng-hide" on-tap="backToEdit(true)" ng-show="editing && isAndroid"></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 ng-hide" on-tap="backToEdit(false)" ng-hide="editing" ng-class="{'hidden':editing}">{{'GoBack' | translate}}</a>
        <a class="button button-clear button-dark ng-hide" on-tap="backToEdit(false)" ng-show="editing">{{'Abort' | translate}}</a>
        <h2 class="title">{{'AddNewSwitch' | translate}}</h2>
        <a class="button button-clear button-dark ng-hide" on-tap="backToEdit(true)" ng-show="editing">{{'save_cap' | translate}}</a>
    </ion-header-bar>

    <ion-content class="has-header" has-bouncing="false">
        <div class="container-fluid">
            <div class="row-bootstrap tile-container">
                <div ng-repeat="icona in allowedIcons" ng-init="tileType = (icona | icon)" class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-ipad" ng-class="modalOpened?'icons-ipad':''" on-tap="tap(icona)">

                    <div ng-class="['tile', tileType, 'state-on']">
                        <div ng-show="tile.frontface" class="front-face"></div>
                        <div class="tile-content">
                            <div class="name-container">
                                <h2>{{icona | iconName | translate}}</h2>
                            </div>

                            <ng-include src="'img/tiles/'+tileType+'.svg'"></ng-include>

                        </div>
                        <div ng-show="(icona | iconName) == (tile.deviceTypeId | iconName)" class="select-icon" redraw-element>
                            <ng-include onload="ribbon = tile.ribbon" src="'img/new.svg'"></ng-include>
                        </div>
                    </div>

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