{{!
* 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.
}}
{{#if view.isDataLoaded}}
  {{#if view.isClassicDashboard}}
    <div class="row">
      <div class="span6">
        <div class="row">
          <div class="span6">
            <div class="box">
              <div class="box-header">
                <h4>{{t dashboard.services}}</h4>
              </div>
              <dl class="dl-horizontal services">
                {{#each item in view.content}}
                  {{view item.viewName serviceBinding="item.model"}}
                {{/each}}
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="span6">
        <div class="box">
          <div class="box-header">
            <h4>{{t dashboard.clusterMetrics}}</h4>
              <div class="btn-group">
                <a class="btn" target="_blank" rel="tooltip" title="Go to Ganglia" {{bindAttr href="view.gangliaUrl"}}><i class="icon-link"></i></a>
                <a href="javascript:void(null)" class="btn btn-success switch-button" data-toggle="modal" {{action "switchToNew" target="view"}}>
                  {{t dashboard.button.switchShort}}
                  <i class="icon-forward"></i>
                </a>
              </div>
          </div>
          <div class="graphs-container">
            <table class="graphs">
              <tr>
                <td>
                  {{view App.ChartClusterMetricsNetwork}}
                </td>
                <td>
                  {{view App.ChartClusterMetricsLoad}}
                </td>
              </tr>
              <tr>
                <td>
                  {{view App.ChartClusterMetricsMemory}}
                </td>
                <td>
                  {{view App.ChartClusterMetricsCPU}}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  {{else}}
    <div class="row-fluid">
      <div class="services-menu well span2" style="padding: 8px 0">
        {{view App.MainServiceMenuView}}
      </div>

      <div class="span10" id="dashboard-widgets-container">
        <div class="box">
          <div class="box-header">
            <div class="row-fluid">
              <h4 class="span10">{{t dashboard.widgets}}</h4>
                <a class="add-widget-button span1">{{view view.plusButtonFilterView}}</a>
                <div class="btn-group">
                  <button class="btn dropdown-toggle span1 more-options-button"  data-toggle="dropdown">
                    <i class="icon-cog"></i> &nbsp;
                    <span class= "caret"></span>
                  </button>
                  <ul class="dropdown-menu right-align-dropdown">
                    <li>
                      <a {{action "resetAllWidgets" target="view"}}>
                        <i class="icon-refresh"></i>
                        {{t dashboard.button.reset}}
                      </a>
                    </li>
                    <li>
                      <a {{action "switchToClassic" target="view"}}>
                        <i class="icon-backward"></i>
                        {{t dashboard.button.switch}}
                      </a>
                    </li>
                    <li>
                      <a target="_blank" {{bindAttr href="view.gangliaUrl"}}>
                        <i class="icon-share"></i>
                        {{t dashboard.button.gangliaLink}}
                      </a>
                    </li>
                  </ul>
                </div>
            </div>
          </div>

          <div id="dashboard-widgets"  class="widgets-container">
            <div class="thumbnails row-fluid" id="sortable">
              {{#if view.visibleWidgets.length}}
                {{#each widgetClass in view.visibleWidgets}}
                  {{#if widgetClass.isProgressBar}}
                    <div class="span4p8">
                      {{view widgetClass }}
                    </div>
                  {{else}}
                    <div class="span2p4">
                      {{view widgetClass }}
                    </div>
                  {{/if}}
                {{/each}}
              {{/if}}
            </div>
          </div>

        </div>
      </div>
    </div>
  {{/if}}
{{/if}}