<div ng-form="vm.availabilityForm">
  <div
    class="d-flex gap-8 a-i-center separator-top"
    style="min-height: 36px"
  >
    <p
      class="text-12 text-medium flex-no-shrink"
      ng-hide="vm.isEditMode"
      translate
    >
      Required interval
    </p>
    <div
      class="d--inline-flex m-l-auto a-i-center min-width-0"
      ng-hide="vm.isEditMode"
    >
      <span>{{ vm.responseInterval || '---' }}</span>
      <span
        class="m-l-4"
        translate
        translate-n="vm.responseInterval"
        translate-plural="minutes"
      >
        minute
      </span>
      <button
        class="btn btn-dot m-l-auto"
        aria-label="{{ 'Edit' | translate }}"
        uib-tooltip="{{ 'Edit' | translate }}"
        tooltip-popup-delay="500"
        tooltip-trigger="'mouseenter'"
        tooltip-append-to-body="true"
        type="button"
        ng-hide="!!vm.status.maintenanceStatus"
        data-cy="requiredAvailabilityIntervalSetting--editButton"
        ng-click="vm.toggleEdit()"
      >
        <i c8y-icon="pencil"></i>
      </button>
    </div>
    <div
      class="fit-w"
      ng-show="vm.isEditMode"
    >
      <div
        class="input-group"
        ng-class="{ 'has-error': vm.invalid('required_availability') }"
      >
        <input
          class="form-control"
          id="required_availability"
          uib-tooltip="{{ vm.validationHints(vm.availabilityForm.required_availability) }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
          placeholder="{{ 'e.g.' | translate }} 1"
          name="required_availability"
          type="number"
          step="1"
          ng-disabled="vm.device.c8y_RequiredAvailability.responseInterval < 0 || !vm.isEditMode"
          ng-model="vm.responseInterval"
          ng-keyup="vm.keyHandler($event)"
          c8y-number
          c8y-max="vm.maxRequiredIntervalLimit"
          c8y-min="0"
        />
        <div class="input-group-btn">
          <button
            class="btn btn-dot"
            ng-class="{ 'btn-pending': vm.saveInProgress }"
            aria-label="{{ 'Save' | translate }}"
            type="button"
            ng-disabled="vm.saveInProgress || vm.availabilityForm.$invalid || !!vm.status.maintenanceStatus"
            data-cy="requiredAvailabilityIntervalSetting--saveButton"
            ng-click="vm.save()"
          >
            <span
              class="text-success"
              title="{{ 'Save' | translate }}"
              ng-hide="vm.saveInProgress"
            >
              <i c8y-icon="check"></i>
            </span>
            <span
              title="{{ 'Saving' | translate }}…"
              ng-show="vm.saveInProgress"
            >
              <i
                class="icon-spin"
                c8y-icon="circle-o-notch"
              ></i>
            </span>
          </button>
        </div>
        <div
          class="input-group-btn"
          ng-show="vm.isEditMode"
        >
          <button
            class="btn btn-dot btn-dot--danger"
            title="{{ 'Cancel' | translate }}"
            type="button"
            ng-disabled="vm.saveInProgress || !!vm.status.maintenanceStatus"
            ng-click="vm.resetEdit()"
          >
            <i c8y-icon="times"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div ng-if="vm.device.c8y_Availability && vm.device.c8y_RequiredAvailability">
  <div
    class="d-flex gap-8 a-i-center separator-top"
    style="min-height: 36px"
  >
    <p
      class="text-12 text-medium flex-no-shrink"
      for="maintenance"
      translate
    >
      Maintenance
    </p>
    <div class="m-l-auto d-inline-flex a-i-center min-width-0">
      <label
        class="c8y-switch c8y-switch--inline"
        uib-tooltip="{{ 'Enable/disable maintenance' | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      >
        <input
          title="{{ 'Enable/disable maintenance' | translate }}"
          aria-label="{{ 'Enable/disable maintenance' | translate }}"
          id="maintenance"
          type="checkbox"
          ng-click="vm.switchMaintenance(vm.device)"
          ng-checked="vm.status.maintenanceStatus"
          data-cy="requiredAvailabilityIntervalSetting--switchMaintenance"
        />
        <span></span>
      </label>
    </div>
  </div>
</div>
