<div class="ui-center" style="align-self: flex-start;">
    <div id="topbar" style="top: 0;">
        <div class="edge"></div>
        <ul>
            <li ng-click="setActiveView('finance')">
                <span class="dimmed">$</span> <span class="value balance">{{ settings.balance | currency : '' }}</span>
                <i ng-if="financeData.profit.perDay > 0" class="fa fa-chevron-up color-green"></i>
                <i ng-if="financeData.profit.perDay < 0" class="fa fa-chevron-down color-red"></i>
            </li>
            <li class="dimmed" localize="topbar_day" localize-data-day="{{ctrl.daysPlayed}}"></li>

            <li onclick="Game.Lifecycle.PauseTime()" uib-tooltip="{{ GetLocalized('pause') }}" tooltip-placement="bottom"
                tooltip-append-to-body="true" class="stateController pause" ng-class="{'active': settings.paused }">
                <span class="glyphicon glyphicon-pause"></span>
            </li>

            <li onclick="Game.Lifecycle.StartTime(1)" uib-tooltip="{{ GetLocalized('play') }}" tooltip-placement="bottom"
                tooltip-append-to-body="true" class="stateController play" ng-class="{'active': settings.state == 1}">
                <span class="glyphicon glyphicon-play"></span>
            </li>

            <li onclick="Game.Lifecycle.StartTime(2)" uib-tooltip="{{ GetLocalized('fastforward') }}" tooltip-placement="bottom"
                tooltip-append-to-body="true" class="stateController forward"
                ng-class="{'active': settings.state == 2}">
                <span class="glyphicon glyphicon-forward"></span>
            </li>

            <li class="dimmed monospaced">{{ ctrl.formattedTime }}</li>

            <li class="inbox" ng-click="setActiveView('inbox')">
                <i class="fa fa-envelope"></i>
                <div class="badge small animated" ng-if="ctrl.unreadMails > 0" style="position: absolute; top: 25px; left: 57px;">{{ ctrl.unreadMails }}</div>
            </li>

            <li uib-tooltip="{{ GetLocalized('show_company_profile') }}" tooltip-placement="bottom" tooltip-append-to-body="true" ng-click="setActiveView('company')">
                <div class="text-left">
                    <icon class="tier">T{{companyTier}}</icon> {{ tierInfo.tierCompletion }}%
                </div>
                <div style="padding: 8px 0">
                    <div class="tierIndicator" style="width: {{ tierInfo.tierCompletion }}%;"></div>
                </div>
            </li>
        </ul>
        <div class="edge"></div>
    </div>

    <div id="zoom-selector">
        <i class="fa fa-search-plus"></i>
        <div dropdown-select="ctrl.zoomLevels" dropdown-model="options.zoomLevel" dropdown-onchange="ctrl.changeZoom(selected)" dropdown-item-label="title"></div>
    </div>
</div>

<div class="ui-center" ng-if="enableNextDayButton" style="width: 260px; margin: auto; top: 70px; z-index: 9999;">
    <button class="blue" ng-click="ctrl.jumpToNextMorning()" localize="jump_to_start_day"></button>
</div>

<div class="ui-center" style="bottom: 110px; pointer-events: none" ng-if="itemMove != null || itemPreview != null">
    <div id="placement-tips" localize="placement_tips"></div>
</div>

<workstation-empty ng-if="selectedWorkstation != null && selectedWorkstation.employee == null" class="dialog"
                   style="height: 515px;"></workstation-empty>
<workstation-employee ng-if="selectedWorkstation != null && selectedWorkstation.employee != null"
                      class="window-large dialog" style="min-height: 680px;"></workstation-employee>
<finance-overview ng-if="view == 'finance'" class="dialog" style="min-height: 633px;"></finance-overview>
<contracts ng-if="view == 'contracts'" class="dialog" style="height: 600px;"></contracts>
<product ng-if="view == 'product'" class="dialog" style="height: 640px;"></product>
<clients ng-if="view == 'clients'" class="dialog" style="height: 600px;"></clients>
<purchase ng-if="view == 'purchase'" class="dialog" style="height: 600px;"></purchase>
<inbox ng-if="view == 'inbox'" class="dialog" style="height: 600px;"></inbox>
<options ng-if="view == 'options'" class="dialog" style="width: 400px;"></options>
<feedback ng-if="view == 'feedback'" class="dialog"></feedback>
<employees ng-if="view == 'employees'" class="dialog" style="height: 600px;"></employees>
<company ng-if="view == 'company'" class="dialog" style="height: 600px;"></company>
<inventory ng-if="view == 'inventory'" class="dialog" style="height: 600px;"></inventory>
<competitors ng-if="view == 'competitors'" class="dialog" style="height: 600px;"></competitors>

<div id="deleteItem" ng-if="itemMove != null" ng-click="sellItem()">
    <i class="fa fa-trash"></i>
</div>

<div class="ui-center" style="bottom: 0;">
    <div id="menu">
        <ul>
            <li ng-repeat="menuItem in menuItems"
                uib-tooltip="{{ menuItem.tooltip }}"
                tooltip-placement="{{ menuItem.tooltipPosition }}"
                class="{{ menuItem.name }}"
                ng-class="{'active': view == menuItem.name }"
                ng-click="setActiveView(menuItem.name)">
                <i class="fa {{ menuItem.faIcon }}"></i>
                <div class="badge" ng-if="menuItem.badgeCount > 0">{{ menuItem.badgeCount }}</div>
            </li>
        </ul>
    </div>
</div>

<notifications></notifications>

<products-overlay></products-overlay>

<tier-report class="dimmer" ng-if="settings.tierReport != null"></tier-report>

<contract-report class="dimmer" ng-if="settings.contractReportId != null"></contract-report>

<contract-request class="dimmer" ng-if="contractRequest != null"></contract-request>

<dark-overlay class="animated pulse"></dark-overlay>

<gameover class="dimmer" ng-if="settings.gameover == true"></gameover>

<div ng-repeat="directive in ctrl.moddingDirectives">
    <render template="directive.name"></render>
</div>