{{!
* 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 id="confirm-hosts">
  <h2>{{t installer.step3.header}}</h2>

  <p class="alert alert-info">{{t installer.step3.body}}</p>

  <div class="box">
    <div class="box-header">
      <div class="button-section">
        {{#unless isBackDisabled}}
          <button class="btn btn-primary step3-remove-selected-btn" {{bindAttr disabled="view.noHostsSelected"}}
            {{action removeSelectedHosts target="controller" }}><i class="icon-trash icon-white"></i>
            {{t installer.step3.removeSelected}}
          </button>
        {{/unless}}
        {{#unless isRetryDisabled}}
          <a class="btn btn-primary decommission"
             href="#" {{action retrySelectedHosts target="view"}}><i class="icon-repeat icon-white"></i>
            {{t installer.step3.retryFailed}}
          </a>
        {{/unless}}

        <div id="host-filter" class="pull-right">
          <ul class="clearfix">
            <li class="first">{{t common.show}}:</li>
            {{#each category in view.categories}}
              <li {{bindAttr class=":filter-status category.itemClass"}}>
                <a {{action selectCategory category target="view"}} href="#">
                  {{category.label}}
                </a>
              </li>
              {{#unless category.last}}
                <li class="divider">|</li>
              {{/unless}}
            {{/each}}
          </ul>
        </div>
      </div>
    </div>

    <div class="pre-scrollable" style="max-height: 440px;">
      <table id="confirm-hosts-table" class="table table-bordered table-striped">
        <thead>
        <tr>
          <th class="tinyspan">
            {{view Ember.Checkbox checkedBinding="view.pageChecked"}}
          </th>
          <th class="span5">{{t common.host}}</th>
          <!-- retrieved from local storage initially -->
          <th class="span2">{{t common.progress}}</th>
          <th class="span2">{{t common.status}}</th>
          <!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
          <th class="span2">{{t common.action}}</th>
          <!-- trash icon -->
          <!-- retry icon -->
        </tr>
        </thead>
        <tbody>
          {{#if view.pageContent}}
            {{#each host in view.pageContent}}
              {{#view App.WizardHostView categoryBinding="controller.category" hostInfoBinding="host"}}
              <td class="step3-table-checkbox">
                {{view Ember.Checkbox checkedBinding="host.isChecked"}}
              </td>
              <td class="host">
                <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
              </td>
              <td class="step3-table-progress">
                <div {{bindAttr class="host.bootBarColor host.isBootDone::progress-striped host.isBootDone::active :progress"}}>
                  <div class="bar" style="width:100%">
                  </div>
                </div>
              </td>
              <td class="step3-table-status">
                <a href="javascript:void(null)"
                   data-toggle="modal" {{action hostLogPopup host target="controller"}}><span {{bindAttr class="host.bootStatusColor"}}>{{host.bootStatusForDisplay}}</span></a>
              </td>
              <td class="step3-table-action">
                <a class="btn btn-mini" {{action remove target="view"}}{{bindAttr disabled="isBackDisabled"}}><i class="icon-trash"></i>
                  {{t common.remove}}</a>
              </td>
              {{/view}}
            {{/each}}
          {{else}}
          <tr>
            <td class="step3-table-no-hosts" colspan="5">
              {{t hosts.table.noHosts}}
            </td>
          </tr>
          {{/if}}
        </tbody>
      </table>
    </div>
    <div id="hosts">
      <div class="page-bar">
        <div class="selected-hosts-info pull-left">
          {{#if view.selectedHostsCount}}
            <a {{action selectedHostsPopup target="controller"}} href="#">
              {{view.selectedHostsCount}}
              {{pluralize view.selectedHostsCount singular="t:hosts.filters.selectedHostInfo" plural="t:hosts.filters.selectedHostsInfo"}}
            </a>
            -
            <a {{action unSelectAll target="view"}} href="#">{{t hosts.filters.clearSelection}}</a>
          {{/if}}
        </div>
        <div class="items-on-page">
          <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
        </div>
        <div class="info">{{view.paginationInfo}}</div>
        <div class="paging_two_button">
          {{view view.paginationFirst}}
          {{view view.paginationLeft}}
          {{view view.paginationRight}}
          {{view view.paginationLast}}
        </div>
      </div>
    </div>
  </div>
  {{#if hasMoreRegisteredHosts}}
    <div {{bindAttr class=":alert alert-warn"}}>
      <a href="#" {{action registeredHostsPopup target="controller"}}>{{view.registeredHostsMessage}}</a>
    </div>
  {{/if}}
  {{#unless disableHostCheck}}
    <div {{bindAttr class=":alert view.status isWarningsBoxVisible::hidden"}}>
      {{view.message}}
      <a href="#" {{action hostWarningsPopup warnings target="controller"}}>{{view.linkText}}</a>
      {{#unless isBootstrapFailed}}
        {{#unless isWarningsLoaded}}
          {{view App.SpinnerView}}
        {{/unless}}
      {{/unless}}
    </div>
  {{/unless}}
  <div class="btn-area">
    <button type="button" class="btn pull-left installer-back-btn" {{bindAttr disabled="isBackButtonDisabled"}} {{action back}}>
      &larr; {{t common.back}}
      {{#if App.router.backBtnClickInProgress}}
        {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
      {{/if}}
    </button>
    <button type="button" class="btn btn-success pull-right" {{bindAttr disabled="isNextButtonDisabled"}} {{action submit target="controller"}}>
      {{#if App.router.nextBtnClickInProgress}}
        {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
      {{/if}}
      {{t common.next}} &rarr;
    </button>
  </div>
</div>