{{!
* 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="deploy">

  <h2>{{t installer.step9.header}}</h2>

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

  <div id="overallProgress">
    <div class="row-fluid">
      <div class="span10">
        <div {{bindAttr class="view.isStepCompleted::progress-striped view.isStepCompleted::active view.barColor :progress"}}>
          <div class="bar" {{bindAttr style="view.barWidth"}}>
          </div>
        </div>
      </div>
      <div class="span2">{{view.progressMessage}}</div>
    </div>
  </div>

  <div class="box">
    <div class="box-header">
      <div class="pull-left">
        {{#if controller.showRetry}}
          <a class="btn btn-primary" href="#" {{action retry}}>
            <i class="icon-repeat icon-white"></i>
            {{t common.retry}}
          </a>
        {{/if}}
      </div>
      <!-- filter by host level -->
      <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 class="pre-scrollable">
      <table id="deploy-status-by-host" class="table table-bordered table-striped">
        <thead>
        <tr>
          <th class="host">
            {{t common.host}}
          </th>
          <th class="status">{{t common.status}}</th>
          <!--  given by the parsing function that parses data from bootstrap call -->
          <th class="message">{{t common.message}}</th>
          <!-- retrieved from local storage initially -->
        </tr>
        </thead>

        <tbody>
          {{#if view.pageContent}}
            {{#each host in view.pageContent}}
              {{#view App.HostStatusView objBinding="host" controllerBinding="controller"}}
              <td class="host">
                <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
              </td>
              <td>
                <div class="progress-bar pull-left">
                  <div {{bindAttr class="view.isHostCompleted::progress-striped view.isHostCompleted::active view.barColor :progress"}}>
                    <div class="bar" {{bindAttr style="view.barWidth"}}></div>
                  </div>
                </div>
                <div class="progress-percentage pull-left">{{host.progress}}%</div>
              </td>
              <td class="host-message">
                <a {{bindAttr class="view.isFailed:text-error view.isSuccess:text-success view.isWarning:text-warning"}}
                    href="javascript:void(null)"
                    data-toggle="modal" {{action hostLogPopup target="view"}}>{{host.message}}</a>
              </td>
              {{/view}}
            {{/each}}
          {{else}}
          <tr>
            <td colspan="3"><p>{{t installer.step3.hosts.noHosts}}</p></td>
          </tr>
          {{/if}}
        </tbody>
      </table>
    </div>
    <div id="hosts">
      <div class="page-bar">
        <div class="selected-hosts-info pull-left">
          {{view.filteredHostsInfo}}
          -
          <a {{action showAllHosts target="view"}} href="#">{{t tableView.filters.showAll}}</a>
        </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>

  <div>
    {{#if view.resultMsg}}
      <p {{bindAttr class="view.resultMsgColor :alert"}}>{{view.resultMsg}}
        {{#if view.isHostHeartbeatLost}}
          <a href="javascript:void(null)"
             data-toggle="modal" {{action hostWithInstallFailed target="view"}}>{{t common.showDetails}}</a>
        {{/if}}
      </p>
    {{/if}}
    <div class="btn-area">
      <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>

</div>