<div class="alert alert-info" ng-if="isDisabled" translate>
  You don’t have the permission required to edit this rule.
</div>
<ng-form name="retentionRuleForm">
  <div class="form-group p-t-16 p-relative" style="z-index: 20">
    <label>{{ 'Data type' | translate }}</label>
    <ui-select
      class="form-control"
      ng-model="rule.dataType"
      ng-change="changeDataType(rule)"
      ng-disabled="isDisabled"
      required
    >
      <ui-select-match
        title="{{ $select.selected.label | translate }}"
        placeholder="{{ 'Select or search' | translate }}"
      >
        <i c8y-icon="{{ $select.selected.icon }}"></i>
        {{ $select.selected.label | translate }}
      </ui-select-match>
      <ui-select-choices
        repeat="dt.value as dt in DATA_TYPES | filterByFields: $select.search:['name']:true"
      >
        <div title="{{ dt.label | translate }}">
          <i c8y-icon="{{ dt.icon }}"></i>
          <span ng-bind="dt.label | translate"></span>
        </div>
      </ui-select-choices>
    </ui-select>
    <c8y-error-feedback field="retentionRuleForm.dataType"></c8y-error-feedback>
  </div>
  <div class="form-group">
    <label>
      {{ 'Fragment type' | translate }}
    </label>
    <input
      class="form-control"
      name="fragmentType"
      ng-model="rule.fragmentType"
      ng-disabled="!isFieldSupportedByRule(rule, 'fragmentType') || isDisabled"
      placeholder="{{ 'e.g.' | translate }} c8y_Position"
      ng-required="isFieldSupportedByRule(rule, 'fragmentType')"
    />
    <c8y-error-feedback field="retentionRuleForm.fragmentType"></c8y-error-feedback>
  </div>
  <div class="form-group">
    <label>
      {{ 'Type' | translate }}
      <button
        class="btn-help btn-help--sm"
        type="button"
        aria-label="{{ 'Help' | translate }}"
        uib-popover="{{ 'This will apply to data that has a type property.' | translate }}"
        popover-trigger="'focus'"
        popover-placement="right"
      ></button>
    </label>

    <input
      class="form-control"
      name="type"
      ng-model="rule.type"
      ng-disabled="!isFieldSupportedByRule(rule, 'type') || isDisabled"
      placeholder="{{ 'e.g.' | translate }} c8y_LocationUpdate"
      ng-required="isFieldSupportedByRule(rule, 'type')"
    />
    <c8y-error-feedback field="retentionRuleForm.type"></c8y-error-feedback>
  </div>
  <div class="form-group" ng-if="!hideSourceField()">
    <label>
      {{ 'Source' | translate }}
      <button
        class="btn-help btn-help--sm"
        type="button"
        aria-label="{{ 'Help' | translate }}"
        uib-popover="{{ 'This will apply to data coming from specified device' | translate }}"
        popover-trigger="'focus'"
        popover-placement="right"
      ></button>
    </label>

    <input
      class="form-control"
      name="source"
      ng-model="rule.source"
      ng-disabled="!isFieldSupportedByRule(rule, 'source') || isDisabled"
      placeholder="{{ 'e.g. * or 12345' | translate }}"
      ng-required="isFieldSupportedByRule(rule, 'source')"
    />
    <c8y-error-feedback field="retentionRuleForm.source"></c8y-error-feedback>
  </div>
  <div class="form-group">
    <label>
      {{ 'Maximum age (days)' | translate }}
      <button
        class="btn-help btn-help--sm"
        type="button"
        aria-label="{{ 'Help' | translate }}"
        uib-popover="{{ 'Cannot be greater than 3650 days.' | translate }}"
        popover-trigger="'focus'"
        popover-placement="right"
      ></button>
    </label>

    <input
      class="form-control"
      name="maximumAge"
      ng-model="rule.maximumAge"
      type="number"
      min="1"
      max="3650"
      placeholder="{{ 'e.g.' | translate }} 29"
      ng-disabled="isDisabled"
      required
    />
    <c8y-error-feedback field="retentionRuleForm.maximumAge"></c8y-error-feedback>
  </div>
</ng-form>
