<div class="environment-variables">
  <div class="warning-message" ng-hide="envVariablesController.isEnvVarEditable">
    Add/Edit environment variables by changing the environment type to <b>compose</b> or <b>openshift</b>
  </div>
  <div flex ng-show="envVariablesController.isEnvVarEditable">
    <!-- Env variables header -->
    <div flex layout="column" md-theme="maincontent-theme">
      <che-list-header che-add-button-title="Add Env Variable"
                       che-on-add="envVariablesController.showEditDialog()"
                       che-delete-button-title="Delete"
                       che-on-delete="envVariablesController.deleteSelectedEnvVariables()"
                       che-hide-delete="envVariablesController.envVariablesSelectedNumber === 0"
                       che-hide-header="!envVariablesController.envVariablesList.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"
                         aria-label="All environment variables"
                         md-theme="default"
                         ng-checked="envVariablesController.isBulkChecked"
                         ng-click="envVariablesController.changeBulkSelection()"></md-checkbox>
          </div>
          <div flex layout="row" layout-align="start center" class="che-list-item-details">
            <che-list-header-column flex="30" layout="column" layout-align="center start"
                                    che-sort-value="envVariablesController.envVariableOrderBy"
                                    che-sort-item="name"
                                    che-column-title="Name"></che-list-header-column>

            <che-list-header-column flex="60" layout="column" layout-align="center start"
                                    che-sort-value="envVariablesController.envVariableOrderBy"
                                    che-sort-item="value"
                                    che-column-title="Value"></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>
      <!-- Env variables list -->
      <che-list class="environment-variables-list" flex
                ng-if="envVariablesController.envVariablesList && envVariablesController.envVariablesList.length > 0">
        <div class="environment-variables-item"
             ng-repeat="envVariable in envVariablesController.envVariablesList | orderBy:envVariablesController.envVariableOrderBy"
             id="env-variable-name-{{envVariable.name}}">
          <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="Environment-Variable-{{envVariable.name}}"
                             ng-model="envVariablesController.envVariablesSelectedStatus[envVariable.name]"
                             ng-change="envVariablesController.updateSelectedStatus()"></md-checkbox>
              </div>
              <div flex layout="row" layout-align="start center">
                <!-- Name -->
                <div flex="30">
                  <span class="che-list-item-name" variable-name="{{envVariable.name}}">{{envVariable.name}}</span>
                </div>
                <!-- Value -->
                <div flex="60">
                  <span class="che-list-item-name" variable-value="{{envVariable.value}}">{{envVariable.value}}</span>
                </div>
                <!-- Actions -->
                <div flex="10" layout="column" layout-align="center end" class="environment-variables-actions">
                  <div flex layout="row">
                    <div ng-click="envVariablesController.showEditDialog(envVariable.name)" edit-variable="{{envVariable.name}}">
                      <span class="fa fa-pencil"></span>
                    </div>
                    <div ng-click="envVariablesController.deleteEnvVariable(envVariable.name)" delete-variable="{{envVariable.name}}">
                      <span class="fa fa-trash-o"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </che-list-item>
        </div>
      </che-list>
    </div>
  </div>
</div>
