{{!
* 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.
}}

{{! #with view.categoryConfigProperty}}
  <form class="form-horizontal">
      <div class="override-controls">
        <h4 class="message">{{t hosts.selectHostsDialog.message}}</h4>
        {{#if view.parentView.warningMessage}}
	        <div class="text-warning">
	          {{view.parentView.warningMessage}}
	        </div>
        {{/if}}
        <table style="width: 100%;">
          <tr>
            <td>
              <a href="#" {{action toggleShowSelectedHosts target="view" }}>{{view.hostSelectMessage}}</a>
              {{#if view.showOnlySelectedHosts}}
                <i class='icon-ok-sign'></i>
              {{/if}}
            </td>
            <td width="30%">
              <div class="row">
                <div class="span2" id="filter-dropdown-div">
                  <!-- Filter text box with drop-down -->
		              <div class="input-append">
		                {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton" placeholderBinding="view.filterTextPlaceholder" class="span2"}}
		                <div class="btn-group">
		                  <button class="btn dropdown-toggle" data-toggle="dropdown">
		                    <span class="caret"></span>
		                  </button>
		                  <ul class="dropdown-menu">
			                  {{#each column in view.filterColumns}}
			                    <li>
			                      <a href="#" {{action selectFilterColumn column target="view"}}>
			                        {{#if column.selected}}
	                              <i class='icon-ok-sign'></i>
	                            {{else}}
                                <i class='icon-placeholder'></i>
	                            {{/if}}
			                        {{column.name}}
			                      </a>
			                    </li>
			                  {{/each}}
		                  </ul>
		                </div>
		              </div>
                </div>
                <div class="span2" id="component-dropdown-div">
                  <!-- Host-components drop-down -->
		              <div class="btn-group">
		                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
		                  Components
		                  <span class="caret"></span>
		                </a>
		                <ul class="dropdown-menu">
		                  <!-- dropdown menu links -->
		                  {{#each component in view.filterComponents}}
                        <li>
                          <a href="#" {{action selectFilterComponent component target="view"}}>
                            {{#if component.selected}}
                              <i class='icon-ok-sign'></i>
                            {{else}}
                              <i class='icon-placeholder'></i>
	                          {{/if}}
	                          {{component.displayName}}
	                        </a>
                        </li>
                      {{/each}}
		                </ul>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <table class="table table-striped hosts-table">
          <thead>
            <tr class="success">
              <th width="10%">
                {{view Ember.Checkbox checkedBinding="view.allHostsSelected"}}
              </th>
              <th width="45%">Host</th>
              <th width="45%">{{view.filterColumn.name}}</th>
            </tr>
          </thead>
         </table>
        <div class="hosts-table-container">
          <table class="table table-striped hosts-table">
          {{#each entry in view.filteredHosts}}
            <tr>
              <td width="10%">
                {{view Ember.Checkbox checkedBinding="entry.selected"}}
              </td>
              <td width="45%">
                {{entry.host.publicHostName}}
              </td>
              <td>
                {{entry.filterColumnValue}}
              </td>
            </tr>
          {{/each}}
         </table>
        </div>
      </div>
  </form>
{{! /with}}