<div class="workspace-machine-item">
  <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 aria-label="Machine-{{machine.name}}"
                     ng-model="cheListHelper.itemsSelectionStatus[machine.name]"
                     ng-change="cheListHelper.updateBulkSelectionStatus()"></md-checkbox>
      </div>
      <!-- Icon -->
      <div layout="column" layout-align="center center">
        <span class="workspace-machine-item-icon chefont cheico-stacks"></span>
      </div>
      <div flex layout="row" layout-align="start center" class="machine-items-area">
        <!-- Name -->
        <div flex="30" layout="column" layout-align="center start">
          <span class="che-list-item-name workspace-machine-item-item-name" machine-name="{{machine.name}}">{{machine.name}}</span>
        </div>
        <!-- Image -->
        <div flex="40" layout="column" layout-align="center start">
          <span class="che-list-item-secondary workspace-machine-item-secondary-color" machine-image="{{machine.image}}">{{machine.image}}</span>
        </div>
        <!-- RAM limit -->
        <div flex="20" layout="column" layout-align="center start">
          <ng-form name="ramAmountForm">
            <che-number-spinner che-form="ramAmountForm"
                                che-name="memory"
                                che-step="0.1"
                                che-tofixed="1"
                                che-minvalue="0.1"
                                che-maxvalue="100"
                                che-unit="GB"
                                id="machine-{{machine.name}}-ram"
                                ng-model="machine.memoryLimitGBytes"
                                ng-change="onRamChange({name: machine.name, memoryLimitGBytes: value})"
                                required>
            </che-number-spinner>
          </ng-form>
        </div>
        <!-- Actions -->
        <div flex="10" layout="column" layout-align="center end" class="machine-actions">
          <div flex layout="row">
            <div ng-click="editMachine({name: machine.name, event: $event})" edit-machine="{{machine.name}}">
              <span class="fa fa-pencil"
                    uib-tooltip="Edit"
                    tooltip-append-to-body="true"></span>
            </div>
            <div popover-placement="bottom"
                 popover-append-to-body="true"
                 popover-trigger="outsideClick"
                 popover-class="workspace-machine-actions-popover"
                 uib-popover-html="
                '<a href=\'{{pageUrl}}?tab=Installers\'>Installers</a>
                 <a href=\'{{pageUrl}}?tab=Servers\'>Servers</a>
                 <a href=\'{{pageUrl}}?tab=Env_Variables\'>Environment Variables</a>'">
              <span class="material-design icon-ic_settings_24px"
                    uib-tooltip="Settings"
                    tooltip-append-to-body="true"></span>
            </div>
            <div ng-click="deleteMachine({name: machine.name, event: $event})" delete-machine="{{machine.name}}">
              <span class="fa fa-trash-o"
                    uib-tooltip="Delete"
                    tooltip-append-to-body="true"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </che-list-item>
</div>
