<c8y-form-group>
  <label translate>Mechanism</label>
  <label
    title="{{ mechanism.label | translate }}"
    class="c8y-radio radio-inline"
    *ngFor="let mechanism of types"
  >
    <input
      type="radio"
      name="{{subscriptionTypeName}}"
      [value]="mechanism.value"
      [(ngModel)]="subscription.type"
      (change)="updateModel()"
      required
      [attr.data-cy]="mechanism.value"
    />
    <span></span>
    <span>{{ mechanism.label | translate }}</span>
  </label>
</c8y-form-group>

<div class="row collapse" [collapse]="subscription.type != 'CyclicRead'" [isAnimated]="true">
  <div class="col-sm-6 col-md-4 col-lg-3">
    <c8y-form-group>
      <label translate>Reading interval</label>
      <div class="input-group">
        <input
          class="form-control"
          type="number"
          name="rate"
          [(ngModel)]="cyclicReadParameters.rate"
          placeholder="{{ 'e.g.' | translate }} 50"
          [required]="requireCyclic"
          min="50"
          [attr.data-cy]="'cyclicReadRate'"
        />
        <span class="input-group-addon units" title="{{ 'Milliseconds' | translate }}">
          {{ 'msec' | translate }}
        </span>
      </div>
    </c8y-form-group>
  </div>
</div>

<div class="row collapse" [collapse]="subscription.type != 'Subscription'" [isAnimated]="true">
  <div class="col-sm-6 col-lg-4">
    <c8y-form-group>
      <label translate>Sampling interval</label>
      <div class="input-group">
        <input
          class="form-control"
          type="number"
          name="samplingRate"
          [(ngModel)]="subscriptionParameters.samplingRate"
          placeholder="{{ 'e.g.' | translate }} 500"
          [required]="requireSubscription"
          min="0"
          [attr.data-cy]="'subscriptionSamplingRate'"
        />
        <span class="input-group-addon units" title="{{ 'Milliseconds' | translate }}" translate>
          msec
        </span>
      </div>
    </c8y-form-group>
  </div>
  <div class="col-sm-6 col-lg-4">
    <c8y-form-group>
      <label translate>Queue size</label>
      <div class="input-group">
        <input
          class="form-control"
          type="number"
          name="queueSize"
          [(ngModel)]="subscriptionParameters.queueSize"
          placeholder="{{ 'e.g.' | translate }} 10"
          min="1"
          [attr.data-cy]="'subscriptionQueueSize'"
        />
        <span class="input-group-addon">
          <strong translate>Discard</strong>&nbsp;
          <label
            *ngFor="let discardOption of discard"
            title="{{ discardOption.label | translate }}"
            class="c8y-radio radio-inline"
          >
            <input
              type="radio"
              name="discard{{ _model.id }}"
              [value]="discardOption.value"
              [(ngModel)]="subscriptionParameters.discardOldest"
              [required]="requireSubscription"
              [attr.data-cy]="discardOption.label"
              [attr.data-name]="'discard' + _model.id"
            />
            <span></span>
            <span>{{ discardOption.label | translate }}</span>
          </label>
        </span>
      </div>
    </c8y-form-group>
  </div>
  <div class="clearfix"></div>
  <div class="col-sm-6 col-lg-4">
    <c8y-form-group>
      <label translate>Data change trigger</label>
      <label
        *ngFor="let trigger of triggers"
        title="{{ trigger.label | translate }}"
        class="c8y-radio radio-inline"
      >
        <input
          type="radio"
          name="dataChangeTrigger{{ _model.id }}"
          [value]="trigger.value"
          [(ngModel)]="subscriptionParameters.dataChangeTrigger"
          [required]="requireSubscription"
          [attr.data-cy]="trigger.label"
          [attr.data-name]="'dataChangeTrigger' + _model.id"
        />
        <span></span>
        <span>{{ trigger.label | translate }}</span>
      </label>
    </c8y-form-group>
  </div>
  <div class="col-sm-6 col-lg-4">
    <c8y-form-group>
      <label translate>Deadband filter</label>
      <label
        *ngFor="let deadbandFilter of filters"
        title="{{ deadbandFilter.label | translate }}"
        class="c8y-radio radio-inline"
      >
        <input
          type="radio"
          name="deadbandType{{ _model.id }}"
          [value]="deadbandFilter.value"
          [(ngModel)]="subscriptionParameters.deadbandType"
          [required]="requireSubscription"
          [attr.data-cy]="deadbandFilter.label"
          [attr.data-name]="'deadbandType' + _model.id"
        />
        <span></span>
        <span>{{ deadbandFilter.label | translate }}</span>
      </label>
    </c8y-form-group>
    <div [collapse]="subscriptionParameters.deadbandType == 'None'" [isAnimated]="true">
      <c8y-form-group>
        <label translate>Deadband value</label>
        <input
          class="form-control"
          type="number"
          name="deadbandValue"
          [(ngModel)]="subscriptionParameters.deadbandValue"
          placeholder="{{ 'e.g.' | translate }} 10"
          [required]="subscriptionParameters.deadbandType != 'None'"
          min="0"
          [attr.data-cy]="'deadbandValue'"
        />
      </c8y-form-group>
    </div>
  </div>
</div>