<div class="bottom-10">
  <div ng-show="!desktopMode" class="alert alert-danger" translate>
    Внимание! При записи некорректных сетевых настроек прибор перестанет передавать события и облачные сервисы будут недоступны. Внимательно проверьте настройки перед записью.
  </div>
</div>

<form class="form-inline" role="form" name="forms.CloudForm">
  <div class="panel panel-default" ng-if="canConfigureGprs">
    <div class="panel-heading" translate>Передача по TCP/IP (GPRS)</div>
    <div class="panel-body">
      <div class="form-group col-md-5" ng-class="forms.CloudForm.GPRSHost.$invalid?'has-error':''">
        <label class="control-label" translate>Адрес</label>
        <input class="form-control" name="GPRSHost" type="text"
               required
               ng-model="getCustomCloud().gprs.host"
               ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
               ng-maxlength="30">
        <div ng-show="forms.CloudForm.GPRSHost.$error.maxlength" class="help-block" translate>Адрес не может быть длиннее 30 символов</div>
        <div ng-show="forms.CloudForm.GPRSHost.$error.required" class="help-block" translate>Адрес не может быть пустым</div>
      </div>
      <div class="form-group col-md-5" ng-class="forms.CloudForm.GPRSPort.$invalid?'has-error':''">
        <label class="control-label" translate>Порт</label>
        <input class="form-control" name="GPRSPort" type="text"
               required
               ng-model="getCustomCloud().gprs.port"
               ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
               ng-pattern="/^\d+$/"
               ng-trim="false"
               validate-range="[1, 65535]">
        <div ng-show="forms.CloudForm.GPRSPort.$invalid" class="help-block" translate>Порт должен быть числом в диапазоне 1…65535</div>
      </div>
    </div>
  </div>

  <div class="panel panel-default" ng-if="canConfigureEthernet">
    <div class="panel-heading" translate>Передача по TCP/IP (Ethernet)</div>
    <div class="panel-body">
      <div class="form-group col-md-5" ng-class="forms.CloudForm.EthHost.$invalid?'has-error':''">
        <label class="control-label" translate>Адрес</label>
        <input class="form-control" name="EthHost" type="text"
               required
               ng-model="getCustomCloud().ethernet.host"
               ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
               ng-maxlength="30">
        <div ng-show="forms.CloudForm.EthHost.$error.maxlength" class="help-block" translate>Адрес не может быть длиннее 30 символов</div>
        <div ng-show="forms.CloudForm.EthHost.$error.required" class="help-block" translate>Адрес не может быть пустым</div>
      </div>
      <div class="form-group col-md-5" ng-class="forms.CloudForm.EthPort.$invalid?'has-error':''">
        <label class="control-label" translate>Порт</label>
        <input class="form-control" name="EthPort" type="text"
               required
               ng-model="getCustomCloud().ethernet.port"
               ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
               ng-pattern="/^\d+$/"
               ng-trim="false"
               validate-range="[1, 65535]">
        <div ng-show="forms.CloudForm.EthPort.$invalid" class="help-block" translate>Порт должен быть числом в диапазоне 1…65535</div>
      </div>
    </div>
  </div>

</form>
