<form name="actionsForm">
  <div class="factory-actions-panel" layout="column">
    <div layout="column" layout-align="start start">
      <div layout="row" layout-align="start start"
           class="factory-actions-input">
        <che-select che-option-values="factoryActionBoxCtrl.actions"
                    che-place-holder="Select action"
                    aria-label="Select action"
                    che-size="3"
                    che-value="factoryActionBoxCtrl.selectedAction">
        </che-select>
        <che-input che-name="value"
                   che-form="actionsForm"
                   che-place-holder="Enter value"
                   aria-label="Enter value"
                   required
                   ng-maxlength="255"
                   ng-model="factoryActionBoxCtrl.selectedParam">
          <div ng-message="required">Param is required.</div>
          <div ng-message="maxlength">The value has to be less than 255 characters long.</div>
        </che-input>
      </div>
      <che-button-primary che-button-title="Add"
                          ng-click="factoryActionBoxCtrl.addAction()"
                          ng-disabled="actionsForm.$invalid"></che-button-primary>
    </div>

    <md-content md-scroll-y flex class="factory-actions-list">
      <div ng-if="factoryActionBoxCtrl.factoryObject.ide.onProjectsLoaded.actions.length > 0">
        <che-list>
          <che-list-item ng-repeat="action in factoryActionBoxCtrl.factoryObject.ide.onProjectsLoaded.actions"
                         flex-gt-sm="100" flex-sm="33">
            <div layout="row" flex>
              <div layout="column"
                   layout-align="start start"
                   class="factory-actions-row-action-name">
                <span>{{action.id}}</span>
              </div>
              <div flex layout-align="start start"
                   class="factory-actions-row-action-param"
                   ng-click="factoryActionBoxCtrl.editAction($event, $index)">
                {{action.properties.name ? action.properties.name : action.properties.file}}
              </div>
              <div flex="10" layout="row" layout-align="center start"
                   class="che-list-actions">
                <div ng-click="factoryActionBoxCtrl.removeAction($index)" class="factory-commands-widget-actions">
                  <span class="fa fa-times-circle"></span>
                </div>
                <div ng-click="factoryActionBoxCtrl.editAction($event, $index)" class="factory-commands-widget-actions">
                  <span class="fa fa-edit"></span>
                </div>
              </div>
            </div>
          </che-list-item>
        </che-list>
      </div>
    </md-content>
  </div>
</form>
