<div class="che-machine-servers">
  <div flex>
    <!-- Servers list header -->
    <div flex layout="column" md-theme="maincontent-theme">
      <che-list-header che-add-button-title="Add Server"
                       che-on-add="machineServersController.showEditDialog()"
                       che-delete-button-title="Delete"
                       che-on-delete="machineServersController.deleteSelectedServers()"
                       che-hide-delete="machineServersController.serversSelectedNumber === 0"
                       che-hide-header="!machineServersController.serversList.length">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="che-list-item-row">
          <!-- Checkbox -->
          <div layout="column" layout-align="center center" class="che-list-item-checkbox">
            <md-checkbox class="che-list-item-checkbox"
                         ng-hide="!machineServersController.hasUserScope"
                         aria-label="All environment variables"
                         md-theme="default"
                         ng-checked="machineServersController.isBulkChecked"
                         ng-click="machineServersController.changeBulkSelection()"></md-checkbox>
          </div>
          <div flex layout="row" layout-align="start center" class="che-list-item-details">
            <che-list-header-column flex="15" layout="column" layout-align="center start"
                                    che-sort-value="machineServersController.serversOrderBy"
                                    che-sort-item="reference"
                                    che-column-title="Key"></che-list-header-column>
            <che-list-header-column flex="10" layout="column" layout-align="center start"
                                    che-sort-value="machineServersController.serversOrderBy"
                                    che-sort-item="port"
                                    che-column-title="Port"></che-list-header-column>
            <che-list-header-column flex="15" layout="column" layout-align="center start"
                                    che-column-title="Protocol"></che-list-header-column>
            <che-list-header-column flex="50" layout="column" layout-align="center start"
                                    che-column-title="Runtime"></che-list-header-column>
            <che-list-header-column flex="10" layout="column" layout-align="center end"
                                    che-column-title="Actions"></che-list-header-column>
          </div>
        </div>
      </che-list-header>
      <!-- Servers list-->
      <che-list class="machine-servers-list" flex
                ng-if="machineServersController.serversList && machineServersController.serversList.length > 0">
        <div class="machine-servers-item"
             ng-repeat="server in machineServersController.serversList | orderBy:['-userScope', machineServersController.serversOrderBy]" id="server-name-{{server.reference | lowercase}}">
          <che-list-item flex>
            <div flex="100"
                 layout="row"
                 layout-align="start stretch"
                 class="che-list-item-row">
              <!-- Checkbox -->
              <div layout="column" layout-align="center center" class="che-list-item-checkbox">
                <md-checkbox ng-disabled="!server.userScope"
                             ng-hide="!machineServersController.hasUserScope"
                             aria-label="Port {{server.reference}}"
                             ng-model="machineServersController.serversSelectedStatus[server.reference]"
                             ng-change="machineServersController.updateSelectedStatus()"></md-checkbox>
              </div>
              <div flex layout="row" layout-align="start center">
                <!-- Reference -->
                <div flex="15"
                     class="che-list-item-name">
                  <span class="che-hover" server-reference="{{server.reference | lowercase}}">{{server.reference | lowercase}}</span>
                </div>
                <!-- Port -->
                <div flex="10"
                     class="che-list-item-name">
                  <span class="che-hover" server-port="{{server.port}}">{{server.port}}</span>
                </div>
                <!-- Protocol -->
                <div flex="15"
                     class="che-list-item-name">
                  <span class="che-hover" server-protocol="{{server.protocol}}">{{server.protocol}}</span>
                </div>
                <!-- Address -->
                <div flex="50"
                     class="che-list-item-name"
                     layout="column" layout-align="center start">
                  <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: {{server.runtime.address}}</div>
                    </div>
                    <div ng-if="server.runtime.url"
                         class="list-servers-item-runtime-url">
                      <div class="title">URL: <a href="{{server.runtime.url}}"
                                                 target="_blank">{{server.runtime.url}}</a></div>
                    </div>
                  </div>
                </div>
                <!-- Actions -->
                <div flex="10" layout="column" layout-align="center end" class="machine-servers-actions">
                  <div flex layout="row">
                    <div ng-if="server.userScope"
                         ng-click="machineServersController.showEditDialog(server.reference)" edit-server="{{server.reference | lowercase}}">
                      <span class="fa fa-pencil"></span>
                    </div>
                    <div ng-if="server.userScope"
                         ng-click="machineServersController.deleteServer(server.reference)" delete-server="{{server.reference | lowercase}}">
                      <span class="fa fa-trash-o"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </che-list-item>
        </div>
      </che-list>
    </div>
  </div>
</div>
