{{!
* 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="host-component-popup-wrap">

    <!-- SERVICES --->

    <div {{bindAttr class="view.isServiceListHidden:hidden :task-list-main-warp"}}>
      <div class="task-top-wrap">
        {{t common.operations}}
        <div class="select-wrap">
          {{t common.show}}:
          {{view Ember.Select
            contentBinding="view.categories"
            optionValuePath="content.value"
            optionLabelPath="content.label"
            selectionBinding="view.serviceCategory"
          }}
        </div>
      </div>
      <div id="service-info">
        {{#each servicesInfo in view.services}}
        <div {{bindAttr class="servicesInfo.isVisible::hidden :log-list-wrap"}}>
          <div {{action gotoHosts servicesInfo}} class="task-list-line-cursor">
            <div class="host-name-icon-wrap">
              <i {{bindAttr class="servicesInfo.status servicesInfo.icon"}}></i>
              <a href="#">
                {{servicesInfo.name}}
              </a>
            </div>
            <div class="progress-bar span2">
                <div {{bindAttr class="servicesInfo.isInProgress:progress-striped :active servicesInfo.barColor :progress"}}>
                    <div class="bar" {{bindAttr style="servicesInfo.barWidth"}}></div>
                </div>
            </div>
            <div class="host-progress-num">{{servicesInfo.progress}}%</div>
            <div class="show-details"><i class="icon-caret-right"></i></div>
          </div>
        </div>
        {{/each}}
        {{#if view.isServiceEmptyList}}
          <div class="log-list-wrap">{{t hostPopup.noServicesToShow}}</div>
        {{/if}}
      </div>
    </div>


  <!-- HOSTS --->

  <div {{bindAttr class="view.isHostListHidden:hidden :task-list-main-warp"}}>
    <div class="task-top-wrap">
      {{#if controller.showServices}}
        <a class="task-detail-back-to-hosts" href="javascript:void(null)" {{action backToServiceList}} >
          <i class="icon-arrow-left"></i>&nbsp;{{t common.operations}}
        </a>
      {{/if}}
      <span class="task-detail-log-rolename" >{{t common.hosts}}</span>
      <div class="select-wrap">
        {{t common.show}}:
        {{view Ember.Select
          contentBinding="view.categories"
          optionValuePath="content.value"
          optionLabelPath="content.label"
          selectionBinding="view.hostCategory"
        }}
      </div>
    </div>
    <div id="host-info">
      {{#each hostInfo in view.hosts}}
      <div {{bindAttr class="hostInfo.isVisible::hidden :log-list-wrap"}}>
        <div {{action gotoTasks hostInfo}} class="task-list-line-cursor">
          <div class="host-name-icon-wrap">
            <i {{bindAttr class="hostInfo.status hostInfo.icon"}}></i>
            <a href="#">
              {{hostInfo.name}}
            </a>
          </div>
          <div class="progress-bar span2">
              <div {{bindAttr class="hostInfo.isInProgress:progress-striped :active hostInfo.barColor :progress"}}>
                  <div class="bar" {{bindAttr style="hostInfo.barWidth"}}></div>
              </div>
          </div>
          <div class="host-progress-num">{{hostInfo.progress}}%</div>
          <div class="show-details"><i class="icon-caret-right"></i></div>
        </div>
      </div>
      {{/each}}
      {{#if view.isHostEmptyList}}
        <div class="log-list-wrap">{{t hostPopup.noHostsToShow}}</div>
      {{/if}}
    </div>
  </div>


  <!-- TASKS --->

  <div {{bindAttr class="view.isTaskListHidden:hidden :task-list-main-warp"}}>
    <div class="task-top-wrap">
       <a class="task-detail-back-to-hosts" href="javascript:void(null)" {{action backToHostList}} ><i class="icon-arrow-left"></i>&nbsp;{{t common.hosts}}</a>
       <div>
         <span class="task-detail-log-rolename" >{{t common.tasks}}</span>
       </div>
      <div class="select-wrap tasks-list-select">
        {{t common.show}}:
        {{view Ember.Select
          contentBinding="view.categories"
          optionValuePath="content.value"
          optionLabelPath="content.label"
          selectionBinding="view.taskCategory"
        }}
      </div>
    </div>
    <div id="host-log">
      {{#each taskInfo in view.tasks}}
      <div {{bindAttr class="taskInfo.isVisible::hidden :log-list-wrap"}}>
        <div {{action toggleTaskLog taskInfo}} class="task-list-line-cursor">
          <i {{bindAttr class="taskInfo.status taskInfo.icon"}}></i>
          <a href="#">
            {{{taskInfo.role}} {{taskInfo.command}}
          </a>
          <div class="show-details"><i class="icon-caret-right"></i></div>
        </div>
      </div>
      {{/each}}
      {{#if view.isTasksEmptyList}}
        <div class="log-list-wrap">{{t hostPopup.noTasksToShow}}</div>
      {{/if}}
    </div>
  </div>


  <!-- TASKS DETAILS --->

  <div {{bindAttr class="view.isLogWrapHidden:hidden :task-detail-info"}}>
    <div class="task-top-wrap">
      <a class="task-detail-back" href="javascript:void(null)" {{action backToTaskList}} ><i class="icon-arrow-left"></i>&nbsp;{{t common.tasks}}</a>
      <div>
        <i {{bindAttr class="view.openedTask.status :task-detail-status-ico view.openedTask.icon"}} class="task-detail-status-ico"></i>
        <span class="task-detail-log-rolename" >{{{view.openedTask.role}} {{view.openedTask.command}}</span>
      </div>
      <div class="task-detail-ico-wrap">
        <a title="Click to Copy" {{action "textTrigger" taskInfo target="view"}} class="task-detail-copy"><i class="icon-copy"></i> {{t common.copy}}</a>
        <a title="Open in New Window" {{action openTaskLogInDialog}} class="task-detail-open-dialog"><i class="icon-external-link"></i> {{t common.open}}</a>
      </div>
    </div>
    <div class="task-detail-log-info">
      <div class="content-area" >
        <div class="task-detail-log-clipboard-wrap" ></div>
        <div class="task-detail-log-maintext">
          <h5>stderr:</h5>
          <pre class="stderr">{{view.openedTask.stderr}}</pre>
          <h5>stdout:</h5>
          <pre class="stdout">{{view.openedTask.stdout}}</pre>
        </div>
      </div>
    </div>
  </div>
</div>