<div class="container-fluid">
    <div class="row-bootstrap tile-container flip-container">
        <div ng-repeat="tile in tiles" ng-init="tile.tileType = (tile.deviceTypeId | icon) "
        class="col-xs-6 col-sm-4 col-md-3 col-lg-2" ng-hide="(tile.tileType =='add' && switchDetected) || (switchCount == 0 && tile.name == 'TotalConsumption')">
            <div class="no-flick" ng-class="(tile.tileType=='new-adapter' && !isFrontFaceEnabled)?'flipper':''" animate-new-switch flip="isFlipped" type="tile.tileType">
                <div ng-class="['tile', tile.tileType, 'state-'+tile.state, (tile.tileType=='new-adapter')?'front flip-card':'']"
                      on-tap="setState(tile)" on-hold="makeVisible(tile)" mn-touch hold="makeVisible(tile)">
                    <div ng-show="tile.frontface" class="front-face">
                        <div class="settings" on-tap="mainSettings(tile)" ion-stop-event="tap">
                            <ng-include src="'img/settings_small.svg'"></ng-include>
                        </div>
                    </div>
                    <div class="settings" on-tap="settings(tile)" ion-stop-event="tap"
                         ng-show="isDeviceTile(tile)" animate-new-firmware on="tile.newFirmwareAvailable" flip="tile.firmwareFlip">
                            <ng-include src="'img/settings_small.svg'" ng-show="!tile.firmwareFlip"></ng-include>
                            <ng-include src="'img/new-firmware.svg'" ng-show="tile.firmwareFlip"></ng-include>
                    </div>
                    <div class="alert" ng-show="tile.state === 'offline'">
                        <ng-include src="'img/alert.svg'"></ng-include>
                    </div>
                    <div class="info-icons" ng-if="isDeviceTile(tile) && tile.state !== 'offline'">
                        <ng-include src="'img/lock.svg'"  class="lock-icon" ng-show="tile.blockSwitchingOff" blinks on="tile.blinkLock"></ng-include>
                    </div>
                    <div class="tile-content">
                        <h1 ng-show="tile.text !== false">{{(tile.text | number:1).split('.')[1] == 0 ? (tile.text | number:0) : (tile.text | number:1)}}<span ng-show="tile.subindex">{{tile.subindex}}</span>
                        </h1>

                        <div class="name-container">
                            <h2 data-fittext ng-show="tile.name" class="no-blink">
                                <div class="state" ng-if="tile.state">
                                    <span ng-show="tile.state === 'on'"
                                        class="title ng-hide">{{(tile.power | number:1).split('.')[1] == 0 ? (tile.power | number:0) : (tile.power | number:1)}} W</span>
                                    <span ng-show="tile.state === 'off'" class="title off ng-hide">{{'OffSwitch' | translate}}</span>
                                    <span ng-show="tile.state === 'offline'" class="title off ng-hide">{{'OfflineSwitch' | translate}}</span>
                                </div>
                                {{isDeviceTile(tile) ? ((tile.name | limitTo: 25)+(tile.name.length > 25 ? '...' : '')) : (tile.name | translate)}}
                            </h2>
                        </div>
                        <div ng-show="tile.icons.length > 0" class="small-icons">
                            <div ng-repeat="icon in tile.icons" ng-class="['icon', 'icon-'+icon]"></div>
                        </div>

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

                    </div>
                    <div ng-show="tile.ribbon" class="select-icon">
                        <ng-include onload="ribbon = tile.ribbon" src="'img/new.svg'"></ng-include>
                    </div>
                    <a class="tile-link" nav-direction="forward" ng-show="tile.tileType == 'add'" on-tap="goToConnect(tile)"></a>
                    <a class="tile-link" nav-direction="forward" ng-show="tile.tileType == 'new-adapter'"
                       on-tap="goToRegister(tile.activationCode, true, tile)"></a>
                    <a class="tile-link" nav-direction="forward" ng-show="tile.tileType == 'mystromsettings'" on-tap="goToMyStromSettings(tile)"></a>
                    <a class="tile-link" nav-direction="forward" ng-show="tile.tileType == 'buy'" on-tap="goToBuy(tile)"></a>
                </div>
                <div class="tile flip-card back" ng-if="tile.tileType=='new-adapter'">
                    <div ng-show="tile.frontface" class="front-face"></div>
                    <div class="tile-content">
                        <div class="name-container">
                            <h2 data-fittext>{{'TapToAdd' | translate}}</h2>
                        </div>
                        <ng-include src="'img/tiles/add.svg'"></ng-include>
                    </div>
                    <div class="select-icon">
                        <ng-include onload="ribbon = tile.ribbon" src="'img/new.svg'"></ng-include>
                    </div>
                    <a class="tile-link" nav-direction="forward" ng-show="tile.tileType == 'new-adapter'"
                       on-tap="goToRegister(tile.activationCode, true)" on-hold="makeVisible(tile)"></a>
                </div>
            </div>
        </div>
        <!--<span ng-init="tileRendered()"></span>-->
        <!--<div ng-hide="true" ng-repeat="icona in allowedIcons" ng-init="icona = (icona | icon)">-->
            <!--<ng-include src="'img/tiles/'+icona+'.svg'"></ng-include>-->
        <!--</div>-->
    </div>
</div>