<div class="row" ng-controller="storageLimitCtrl">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
    <p class="text-light" translate>
      Send a warning email to a global role when the storage quota is nearly reached.
    </p>
    <form name="storageLimitForm" ng-submit="updateStorageLimitEmailInfo()">
      <label class="c8y-checkbox">
        <input type="checkbox" ng-model="data.emailWarningEnabled" name="emailWarningEnabled" />
        <span></span>
        <span translate>Activate notification</span>
      </label>
      <div class="form-group" ng-if="data.emailWarningEnabled">
        <label for="selectedUserGroup" translate>Notified global role</label>
        <select
          name="type"
          class="form-control"
          ng-model="data.selectedUserGroup"
          name="selectedUserGroup"
          ng-options="group for group in userGroups"
          required
        ></select>
      </div>
      <div
        class="form-group"
        ng-class="{ 'has-error': invalid('threshold') }"
        ng-if="data.emailWarningEnabled"
      >
        <label for="threshold" translate>Threshold (%)</label>
        <input
          uib-tooltip="{{ validationHints(storageLimitForm.threshold, errorList) }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
          min="1"
          max="100"
          type="number"
          class="form-control input-border"
          ng-model="data.threshold"
          name="threshold"
          id="threshold"
          placeholder="{{ 'e.g.' | translate }} 30"
          required
        />
      </div>
      <div class="form-group">
        <button
          class="btn btn-primary"
          type="submit"
          title="{{ 'Update settings' | translate }}"
          ng-disabled="storageLimitForm.$invalid"
        >
          {{ 'Update settings' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>
