<ng-form name="form">
  <fieldset class="form-inline compute-resource">
    <label ng-if="label">{{label}}</label>
    <div ng-class="{ 'has-error': form.$invalid }">
      <label class="sr-only" ng-attr-for="{{id}}">Amount</label>
      <input type="number"
             name="amount"
             ng-attr-id="{{id}}"
             ng-model="amount"
             min="0"
             ng-attr-placeholder="{{placeholder}}"
             class="form-control"
             ng-attr-aria-describedby="{{description ? id + '-help' : undefined}}">
      <label class="sr-only" ng-attr-for="{{id}}-unit">Unit</label>
      <select ng-model="unit"
              ng-options="option.value as option.label for option in units"
              ng-attr-id="{{id}}-unit"
              class="form-control inline-select">
      </select>
    </div>
    <div ng-if="description" class="help-block" ng-attr-id="{{id}}-help">
      {{description}}
    </div>
    <div ng-if="form.$invalid" class="has-error">
      <div ng-if="form.amount.$error.number" class="help-block">
        Must be a number.
      </div>
      <div ng-if="form.amount.$error.min" class="help-block">
        Can't be negative.
      </div>
      <div ng-if="form.amount.$error.limitRangeMin" class="help-block">
        Can't be less than {{limitRangeMin | usageWithUnits : type}}.
      </div>
      <div ng-if="form.amount.$error.limitRangeMax" class="help-block">
        Can't be greater than {{limitRangeMax | usageWithUnits : type}}.
      </div>
      <div ng-if="form.amount.$error.limitLargerThanRequest" class="help-block">
        Limit can't be less than request ({{request | usageWithUnits : type}}).
      </div>
      <div ng-if="form.amount.$error.limitWithinRatio" class="help-block">
        <span ng-if="!amount && !defaultValue">
          Limit is required if request is set. (Max Limit/Request Ratio: {{maxLimitRequestRatio}})
        </span>
        <span ng-if="amount || defaultValue">
          Limit cannot be more than {{maxLimitRequestRatio}} times request value.
          (Request: {{request | usageWithUnits : type}},
          <!-- Show default if amount is unset. -->
          Limit: {{(amount ? (amount + unit) : defaultValue) | usageWithUnits : type}})
        </span>
      </div>
    </div>
  </fieldset>
</ng-form>
