<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="list-servers"
     layout="column">

  <div ng-if="listServersController.serversList.length > 0">

    <che-list-header>
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="row"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="start center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="All ports"
                         md-theme="default"
                         ng-checked="listServersController.isBulkChecked"
                         ng-click="listServersController.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex="15"
                                  che-sort-value="listServersController.serversOrderBy"
                                  che-sort-item="reference"
                                  che-column-title="Reference"></che-list-header-column>
          <che-list-header-column flex="10"
                                  che-sort-value="listServersController.serversOrderBy"
                                  che-sort-item="port"
                                  che-column-title="Port"></che-list-header-column>
          <che-list-header-column flex="15"
                                  che-column-title="Protocol"></che-list-header-column>
          <che-list-header-column flex="50"
                                  che-column-title="Runtime"></che-list-header-column>
          <che-list-header-column flex="10"
                                  che-column-title="Action"></che-list-header-column>
        </div>
      </div>
    </che-list-header>

    <che-list flex>
      <che-list-item ng-mouseover="hover=true" ng-mouseout="hover=false"
                     ng-repeat="server in listServersController.serversList | orderBy:['-userScope', listServersController.serversOrderBy]">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="server-item-row">
          <div layout="row"
               layout-align="start start"
               class="che-checkbox-area">
            <che-list-item-checked ng-model="listServersController.serversSelectedStatus[server.reference]"
                                   che-aria-label-checkbox="Port {{server.reference}}"
                                   ng-if="server.userScope"
                                   ng-click="listServersController.updateSelectedStatus()"></che-list-item-checked>
          </div>
          <div flex
               layout-xs="column" layout-gt-xs="row"
               layout-align="start start"
               class="che-list-item-details">
            <div flex="15"
                 class="che-list-item-name">
              <span class="che-hover">{{server.reference | lowercase}}</span>
            </div>
            <div flex="10"
                 class="che-list-item-name">
              <span class="che-hover">{{server.port}}</span>
            </div>
            <div flex="15"
                 class="che-list-item-name">
              <span class="che-hover">{{server.protocol}}</span>
            </div>
            <div flex="50"
                 class="che-list-item-name">
              <div ng-if="server.runtime"
                   class="che-hover list-servers-item-runtime">
                <div ng-if="server.runtime.address"
                     class="list-servers-item-runtime-address">
                  <div class="title">Address:</div>
                  <div>{{server.runtime.address}}</div>
                </div>
                <div ng-if="server.runtime.url"
                     class="list-servers-item-runtime-url">
                  <div class="title">URL:</div>
                  <div><a href="{{server.runtime.url}}" target="_blank">{{server.runtime.url}}</a></div>
                </div>
              </div>
            </div>
            <div flex="10">
              <div class="che-list-actions"
                   ng-if="server.userScope"
                   ng-click="listServersController.showEditDialog($event,server.reference)">
                <i class="fa fa-pencil" uib-tooltip="Edit"></i>
              </div>
            </div>
          </div>
        </div>
      </che-list-item>
    </che-list>
  </div>

  <!-- buttons -->
  <div layout="row" flex>
    <div flex>
      <che-button-default class="che-list-add-button"
                          che-button-title="Add" name="addButton"
                          ng-click="listServersController.showEditDialog($event)"></che-button-default>
    </div>
    <div flex-offset="5" ng-if="listServersController.serversList.length > 0">
      <che-button-primary-flat ng-disabled="(listServersController.serversSelectedNumber === 0)"
                               che-button-title="Delete" name="deleteButton"
                               ng-click="listServersController.deleteSelectedServers()"></che-button-primary-flat>
    </div>
  </div>
</div>

