<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
-->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h2>About {{ getBrandedText('product.name') }}</h2>
            <p>This is the {{ getBrandedText('product.name') }} JavaScript web client for the REST API.</p>
            <p>
                Some useful references include:
                <ul>
                    <li><a href="http://brooklyn.apache.org">Brooklyn project website</a></li>
                    <li><a href="http://github.com/apache/brooklyn">Brooklyn code @ GitHub</a></li>
                </ul>
                <small><em>Note you can observe the REST requests made by the Javascript GUI through the developers console in many browsers.</em></small>
            </p>

            <h2>Version Information</h2>
            <ul class="list-group">
                <li class="list-group-item" ng-if="vm.buildInfo.buildVersion">
                    <span class="badge">
                        {{vm.buildInfo.buildVersion}}
                    </span>
                    <h4 class="list-group-item-heading">{{ getBrandedText('product.name') }}</h4>
                </li>
                <li class="list-group-item">
                    <span class="badge">{{vm.buildInfo.brooklynVersion}}</span>
                    <h4 class="list-group-item-heading">Apache Brooklyn UI</h4>
                    <small class="list-group-item-text" ng-if="vm.buildInfo.buildBranch || vm.buildInfo.buildCommitId">
                        Built from 
                        <span ng-if="vm.buildInfo.buildBranch">branch <strong>{{vm.buildInfo.buildBranch}}</strong></span>
                        <span ng-if="vm.buildInfo.buildCommitId">commit <strong>{{vm.buildInfo.buildCommitId}}</strong></span>
                    </small>
                </li>
                <li class="list-group-item">
                    <span class="badge">{{vm.serverVersion.version}}</span>
                    <h4 class="list-group-item-heading">Brooklyn Server</h4>
                </li>
            </ul>

            <h2>HA status</h2>
            <table class="table table-responsive table-bordered">
                <thead>
                <tr>
                    <th class="server-status-node-id">Node ID</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="node in vm.states.nodes track by node.nodeId"
                    ng-class="{success: node.state === 'online', danger: node.state === 'offline'}">
                    <td>
                        {{node.nodeId}}
                        <span ng-if="node.nodeId === vm.states.ownId" class="label label-info">current</span>
                        <span ng-if="node.status === 'MASTER'" class="label label-success">master</span>
                    </td>
                    <td>
                        <span class="text-left">{{node.status | lowercase}}</span>
                        <a ng-if="node.state === 'online'" class="btn btn-xs btn-success pull-right" class="text-right" ng-class="{disabled: node.nodeUri === null}">Open</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="col-md-6">
            <h2>Feature Information</h2>
            <p>This distribution includes the following features:</p>
            <ul class="list-group">
                <li ng-repeat="feature in vm.serverVersion.features track by $index" class="list-group-item">
                    <span class="badge">{{feature.version}}</span>
                    <h4 class="list-group-item-heading">{{feature.name}}</h4>
                    <small class="list-group-item-text">{{feature.symbolicName}}</small>
                </li>
            </ul>
        </div>
    </div>
</div>
