<form class="form-horizontal" style="margin-top: 15px">
  <div class="form-group">
    <div class="col-sm-12" style="margin-top: 5px">
      <label class="control-label text-left">Configs</label>
      <span class="label label-default interactive" style="margin-left: 10px" ng-click="addConfig()"> <pr-icon icon="'plus'" mode="'alt'"></pr-icon> add a config </span>
    </div>
    <!-- info message -->
    <div class="form-group" ng-show="formValues.Configs.$invalid" style="margin-bottom: 0px">
      <div class="col-sm-12 small text-warning" style="padding-left: 35px; padding-top: 20px">
        <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> {{ formValues.Configs.$error }}
      </div>
    </div>
    <div class="col-sm-12 form-inline" style="margin-top: 10px">
      <div ng-repeat="config in formValues.Configs" style="margin-top: 2px">
        <div class="input-group col-sm-4 input-group-sm">
          <span class="input-group-addon">config</span>
          <select
            class="form-control"
            ng-change="checkIfConfigDuplicated()"
            ng-model="config.model"
            ng-options="config.Name for config in availableConfigs | orderBy: 'Name'"
            data-cy="docker-stack-configs-select"
          >
            <option value="" selected="selected">Select a config</option>
          </select>
        </div>
        <div class="input-group col-sm-4 input-group-sm">
          <span class="input-group-addon">Path in container</span>
          <input class="form-control" ng-model="config.FileName" placeholder="e.g. /path/in/container" />
        </div>
        <button class="btn btn-dangerlight" type="button" ng-click="removeConfig($index)">
          <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
        </button>
      </div>
    </div>
  </div>
</form>
