<div class="l-admin-content">
    <ng-switch on="$ctrl.isWebFarmEnabled" class="ui-text">
        <div ng-switch-when="true">
            <div class="admin-form">
                <h1>{{::WebFarmText.Label_WebFarmEnabled}}</h1>
                <p ng-if="$ctrl.nodes.length == 1">{{::WebFarmText.Message_SingleNodeWebFarm}}</p>
                <p><span ng-click="$ctrl.disableWebFarm()" class="ui-link">{{::WebFarmText.Label_DisableWebFarm}}</span></p>
            </div>
            <div class="admin-form">
                <h1>
                    <span>{{::WebFarmText.Label_Configuration}}</span>
                    <ng-messages for="$ctrl.validation">
                        <ng-message when="error"><span title="{{ $ctrl.validation.error }}" class="ui-indicator-medium ui-indicator-error valign-bottom"></span></ng-message>
                        <ng-message when="warning"><span title="{{ $ctrl.validation.warning }}" class="ui-indicator-medium ui-indicator-warning valign-bottom"></span></ng-message>
                    </ng-messages>
                </h1>
                <table class="grid-view webFarm-gridView">
                    <thead>
                        <tr>
                            <th>{{::WebFarmText.Label_Node}}</th>
                            <th>
                                <label class="ui-checkbox">
                                    <input type="checkbox" ng-model="$ctrl.allNodesProcessBackgroundTasks" />
                                    <span>{{::WebFarmText.Label_ProcessBackgroundTasks}}</span>
                                </label>
                            </th>
                            <th title="{{::WebFarmText.Tooltip_MasterNode}}">{{::WebFarmText.Label_MasterNode}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="node in $ctrl.nodes track by node.MachineName">
                            <td>{{::node.MachineName}}<span ng-if="$ctrl.isLocalNode(node)"> ({{::WebFarmText.Label_LocalNode}})</span></td>
                            <td class="grid-cell-centered">
                                <input type="checkbox" ng-model="$ctrl.processesBackgroundTasks(node).value" class="valign-bottom" />
                            </td>
                            <td class="grid-cell-centered">
                                <input type="radio" name="masterNode" ng-value="node.MachineName" ng-model="$ctrl.masterNode" class="valign-bottom" />
                            </td>
                            <td>
                                <span ng-click="$ctrl.remove(node)" ng-disabled="!$ctrl.canRemove(node)" title="{{ $ctrl.removeTooltip(node) }}" class="ui-link">
                                    {{::WebFarmText.Label_RemoveKnownNode}}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="admin-form">
                <h1>{{::WebFarmText.Label_Status}}</h1>
                <table class="static-grid-view webFarm-gridView">
                    <thead>
                        <tr class="grid-header">
                            <th>{{::WebFarmText.Label_Node}}</th>
                            <th>{{::WebFarmText.Label_LastStatusUpdate}}</th>
                            <th>{{::WebFarmText.Label_ReceivingServer}}</th>
                            <th>{{::WebFarmText.Label_LastSeen}}</th>
                            <th></th>
                            <th>{{::WebFarmText.Label_LastPingResult}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="status in $ctrl.connections.value track by status.receiving.MachineName + status.transmitting.MachineName"
                            title="{{status.receiving.IsOffline ? WebFarmText.Tooltip_ServerOffline : ''}}"
                            ng-class="status.receiving.IsOffline ? 'webFarm-receivingOffline': ''">

                            <td ng-if="status.isFirstInGroup" rowspan="{{status.receiving.Connections.length}}" class="webFarm-receivingStatus">{{::status.receiving.MachineName}}</td>
                            <td ng-if="status.isFirstInGroup" rowspan="{{status.receiving.Connections.length}}" class="webFarm-receivingStatus">
                                {{status.receiving.LastUpdated | date:'MMM d h:mm:ss a'}}
                                <span ng-if="status.receiving.IsOffline" class="ui-indicator-small ui-indicator-warning"></span>
                            </td>
                            <td>{{::status.transmitting.MachineName}}</td>
                            <td>{{status.transmitting.LastSeen | date:'MMM d h:mm:ss a'}}</td>
                            <td title="{{$ctrl.statusTooltip(status.transmitting)}}">
                                <span ng-class="'webFarm-status-' + $ctrl.nodeStatus(status.transmitting)" class="ui-indicator-small"></span>
                            </td>
                            <td>{{$ctrl.pingResultText(status.transmitting)}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div ng-switch-when="false">
            <div class="admin-form">
                <h1>{{::WebFarmText.Label_WebFarmDisabled}}</h1>
                <p ng-if="$ctrl.nodes.length > 1">{{::WebFarmText.Message_MultiNodeNoWebFarm}}</p>
                <p><span ng-click="$ctrl.enableWebFarm()" class="ui-link">{{::WebFarmText.Label_EnableWebFarm}}</span></p>
            </div>
            <div class="admin-form">
                <h1>{{::WebFarmText.Label_WebFarmNodes}}</h1>
                <table class="grid-view webFarm-gridView">
                    <thead>
                        <tr>
                            <th>{{::WebFarmText.Label_Node}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="node in $ctrl.nodes track by node.MachineName">
                            <td>{{::node.MachineName}}<span ng-if="$ctrl.isLocalNode(node)"> ({{::WebFarmText.Label_LocalNode}})</span></td>
                            <td>
                                <span ng-click="$ctrl.remove(node)" ng-disabled="!$ctrl.canRemove(node)" title="{{ $ctrl.removeTooltip(node) }}" class="ui-link">
                                    {{::WebFarmText.Label_RemoveKnownNode}}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </ng-switch>
</div>