<div class="background">
    <img class="office" ng-src="{{ activeBuilding.image }}">

    <div class="assets" ng-class="{ clean: (itemPreview != null || itemMove != null) }">
        <!-- Preview -->
        <div ng-if="itemPreview != null" id="item-preview" class="item-preview orientation{{itemPreview.orientation}}"
             style="top: {{ itemPreview.top }}px; left: {{ itemPreview.left }}px; z-index: {{ itemPreview.zIndex }}"
             ng-class="{ blocked: itemPreview.blocked }">
            <div ng-if="itemPreview.workstation != null" class="workstationContainer">
                <div class="workstation">
                    <img ng-src="3dmodels/workstations/desk{{itemPreview.workstation.deskId}}-{{itemPreview.orientation}}.png"/>
                </div>
            </div>

            <img ng-if="itemPreview.item != null" class="item-preview item {{itemPreview.item.name}}"
                 ng-src="{{ itemPreview.url }}"
                 style="margin-top: {{ itemPreview.item.placementOffset[itemPreview.orientation-1].top }}px; margin-left: {{ itemPreview.item.placementOffset[itemPreview.orientation-1].left }}px;"/>
        </div>

        <!-- Workstations -->
        <div class="workstationContainer orientation{{workstationInfo.workstation.orientation}}"
             ng-class="{ move: workstationInfo.workstation.move }"
             ng-repeat="workstationInfo in ctrl.workstationInfos track by workstationInfo.workstation.id"
             id="{{::workstationInfo.workstation.id}}">
            <div class="workstation animated bounceIn" id="workstation{{::$index}}"
                 ng-class="{ working: workstationInfo.isWorking, move: workstationInfo.workstation.move, blocked: workstationInfo.workstation.blocked }"
                 style="top: {{ workstationInfo.top }}px; left: {{ workstationInfo.left }}px; z-index: {{ workstationInfo.zIndex }}">

                <img ng-src="3dmodels/workstations/desk{{workstationInfo.workstation.deskId}}-{{workstationInfo.workstation.orientation}}.png"/>

                <!-- Screens -->
                <div ng-if="[1,2].includes(workstationInfo.workstation.orientation)"
                     class="screen computer{{workstationInfo.workstation.computerId}}"
                     ng-class="{working: workstationInfo.isWorking }"></div>

                <!-- Person -->
                <div ng-if="workstationInfo.workstation.employee != null">
                    <div ng-if="workstationInfo.workstation.employee != null"
                         class="employee {{ ::workstationInfo.workstation.employee.avatar }}"
                         ng-class="{ 'at-work': workstationInfo.isEmployeeAtWork }">
                        <img ng-src="3dmodels/people/{{ ::workstationInfo.workstation.employee.avatar }}/legs-{{workstationInfo.workstation.orientation}}.png"
                             class="legs">
                        <img ng-src="3dmodels/people/{{ ::workstationInfo.workstation.employee.avatar }}/torso-{{workstationInfo.workstation.orientation}}.png"
                             class="torso">
                        <div style="background-image: url(3dmodels/people/{{ ::workstationInfo.workstation.employee.avatar }}/arms-{{workstationInfo.workstation.orientation}}-animation.png);"
                             class="arms animate"></div>
                    </div>
                </div>
            </div>

            <div class="menu" id="workstationMenu{{$index}}"
                 ng-class="{'animated custom-flash': workstationInfo.shouldMenuFlash }"
                 style="top: {{ workstationInfo.top }}px; left: {{workstationInfo.left}}px; z-index: {{ ::workstationInfo.menuZindex; }}">

                <span ng-if="workstationInfo.workstation.employee == null"
                      class="fa fa-users playClick empty-workstation animated pulse"
                      ng-click="ctrl.setWorkstation(workstationInfo.workstation)" disable-animate></span>

                <div class="bar-container" ng-click="ctrl.setWorkstation(workstationInfo.workstation)"
                     ng-if="workstationInfo.workstation.employee != null">
                    <div class="bar">
                        <div class="indicator" style="width: {{ workstationInfo.progress | floor  }}%">
                        </div>

                        <div class="text" ng-bind-html="workstationInfo.label"></div>

                        <div class="smiley">
                            <img ng-src="images/ui/smiley-happy.png"
                                 ng-if="workstationInfo.workstation.employee.mood >= 50"/>
                            <img ng-src="images/ui/smiley-moody.png"
                                 ng-if="workstationInfo.workstation.employee.mood < 50 && workstationInfo.workstation.employee.mood > 30"/>
                            <img ng-src="images/ui/smiley-sad.png"
                                 ng-if="workstationInfo.workstation.employee.mood <= 30"/>
                        </div>

                        <div class="employeeType Bg-{{ workstationInfo.workstation.employee.employeeTypeName }}">
                            <span class="fa playClick {{ ::workstationInfo.cssClass }}"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div ng-repeat="itemInfo in ctrl.itemInfos track by itemInfo.item.id"
             class="item orientation{{itemInfo.item.orientation}}"
             ng-class="{ blocked: itemInfo.item.blocked, move: itemInfo.item.move }"
             id="{{itemInfo.item.id}}">
            <img ng-src="{{ itemInfo.url }}"
                 class="item {{ ::itemInfo.item.item.name}}"
                 style="margin-top: {{ itemInfo.item.item.placementOffset[itemInfo.item.orientation-1].top }}px; margin-left: {{ itemInfo.item.item.placementOffset[itemInfo.item.orientation-1].left }}px; top: {{ itemInfo.top }}px; left: {{itemInfo.left}}px; z-index: {{ itemInfo.zIndex }};"/>
        </div>
    </div>

    <div class="grid">
        <div ng-repeat="cell in ctrl.cells track by cell.id" class="cell"
             id="{{::cell.id}}"
             ng-right-click="ctrl.rightClickCell(cell)"
             ng-click="ctrl.clickCell(cell)"
             onmouseenter="mouseoverCell(this)">
        </div>
    </div>
</div>
