<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Идентификация</h3>
  </div>
  <div class="panel-body">

    <form class="form-inline" role="form" name="accountForm" ng-if="!desktopMode">
      <div class="form-group col-md-6" ng-class="accountForm.$invalid?'has-error':''">
        <label class="control-label"><translate>Номер объекта</translate>&nbsp;</label>
        <input type="text" class="form-control" name="objectNumber"
               ng-model="account().account" required ng-pattern="/^\d+$/"
               ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
               ng-trim="false"
               validate-range="accountRange"
               ng-change="formGuard(accountForm)">
        <div ng-show="accountForm.$invalid" class="help-block"><translate>Номер объекта должен быть числом в диапазоне:</translate> {[accountRange[0]]}…{[accountRange[1]]}</div>
      </div>
    </form>

    <form class="form-horizontal" role="form" name="accountForm" ng-if="desktopMode">
      <div class="form-group" ng-class="accountForm.$invalid?'has-error':''">
        <label class="control-label col-md-3"><translate>Номер объекта</translate>&nbsp;</label>
        <div class="col-md-3">
          <input type="text" class="form-control" name="objectNumber"
                 ng-model="account().account" required ng-pattern="/^\d+$/"
                 ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                 ng-trim="false"
                 validate-range="accountRange"
                 ng-change="formGuard(accountForm)">
        </div>
        <div ng-show="accountForm.$invalid" class="help-block"><translate>Номер объекта должен быть числом в диапазоне:</translate> {[accountRange[0]]}…{[accountRange[1]]}</div>
      </div>

      <div class="form-group">
        <label class="control-label col-md-3"><translate>Серийный номер</translate>&nbsp;</label>
        <p class="form-control-static col-md-3"><strong>{[ csnValue() ]}</strong></p>
      </div>
    </form>

  </div>
</div>

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

<div class="panel panel-default" ng-show="canConfigureGprs">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Передача по TCP/IP (GPRS)</h3>
  </div>

  <div class="panel-body">
    <div ng-repeat="(addr_index, addr) in channels().gprs">
      <form class="form-inline" role="form" name="GPRSForm">
        <div class="row">
        <div class="form-group col-md-6 col-lg-5" ng-class="GPRSForm.Host.$invalid?'has-error':''">
          <label class="control-label"><translate>Адрес</translate> {[ addr_index + 1 ]}&nbsp;</label>
          <input type="text" class="form-control" name="Host"
                 ng-model="addr.host"
                 ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                 ng-maxlength="30"
                 ng-change="formGuard(GPRSForm)"
                 ng-disabled="settingsProtected()">
          <div ng-show="GPRSForm.Host.$invalid" class="help-block" translate>Адрес не может быть длиннее 30 символов</div>
        </div>
        <div class="form-group col-md-3" ng-class="GPRSForm.Port.$invalid?'has-error':''">
          <label class="control-label"><translate>Порт</translate> {[ addr_index + 1 ]}&nbsp;</label>
          <input type="text" size="5" class="form-control" name="Port"
                 ng-model="addr.port"
                 ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                 ng-pattern="/^\d+$/"
                 ng-trim="false"
                 validate-range="[0, 65535]"
                 ng-change="formGuard(GPRSForm)">
          <div ng-show="GPRSForm.Port.$invalid" class="help-block" translate>Порт должен быть числом в диапазоне: 0…65535</div>
        </div>
      </div>
      </form>
      <hr ng-if="!$last">
    </div>
    <br/>
    <div ng-show="settingsProtected()" class="help-block" translate>
      Адреса для подключения к «Центру охраны» недоступны для редактирования, так как включена функция «Защита от угона».
    </div>
  </div>
</div>

<div class="panel panel-default" ng-show="canConfigureEthernet">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Передача по TCP/IP (Ethernet)</h3>
  </div>

  <div class="panel-body">
    <div ng-repeat="(addr_index, addr) in channels().ethernet">
      <form class="form-inline" role="form" name="EthForm">
        <div class="row">
          <div class="form-group col-md-6 col-lg-5" ng-class="EthForm.Host.$invalid?'has-error':''">
            <label class="control-label"><translate>Адрес</translate> {[ addr_index + 1 ]}&nbsp;</label>
            <input type="text" class="form-control" name="Host"
                   ng-model="addr.host"
                   ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                   ng-maxlength="30"
                   ng-change="formGuard(EthForm)"
                   ng-disabled="settingsProtected()">
            <div ng-show="EthForm.Host.$invalid" class="help-block" translate>Адрес не может быть длиннее 30 символов</div>
          </div>
          <div class="form-group col-md-3" ng-class="EthForm.Port.$invalid?'has-error':''">
            <label class="control-label"><translate>Порт</translate> {[ addr_index + 1 ]}&nbsp;</label>
            <input type="text" size="5" class="form-control" name="Port"
                   ng-model="addr.port"
                   ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                   ng-pattern="/^\d+$/"
                   ng-trim="false"
                   validate-range="[0, 65535]"
                   ng-change="formGuard(EthForm)">
            <div ng-show="EthForm.Port.$invalid" class="help-block" translate>Порт должен быть числом в диапазоне: 0…65535</div>
          </div>
        </div>
      </form>
      <hr ng-if="!$last">
    </div>
    <br/>
    <div ng-show="settingsProtected()" class="help-block" translate>
      Адреса для подключения к «Центру охраны» недоступны для редактирования, так как включена функция «Защита от угона».
    </div>
  </div>
</div>

<div class="panel panel-default" ng-show="canConfigureCsd">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Передача в CSD-канале GSM</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-6 col-lg-6" ng-repeat="(sim_index, sim_numbers) in channels().csd">
        <form class="form-horizontal" role="form" name="CSDForm">
          <div class="form-group" ng-repeat="(number_index, number) in channels().csd[sim_index] track by $index"
               ng-class="{['CSDForm.Number' + number_index + '.$invalid?\'has-error\':\'\'']}">
            <label class="col-sm-5 control-label" translate>Номер {[ number_index + 1 ]} для SIM {[ sim_index + 1 ]}</label>
            <div class="col-sm-6">
              <input type="text" size="14" class="form-control" ng-model="sim_numbers[number_index]" name="{['Number' + number_index]}"
                     ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                     ng-change="formGuard(CSDForm)" ng-maxlength="20"
                     ng-pattern="/^\+?[0-9]+$/">
            </div>
            <div ng-show="{['CSDForm.Number' + number_index + '.$error.maxlength']}" class="help-block col-sm-11" translate>Номер не может быть длиннее 20 символов</div>
            <div ng-show="{['CSDForm.Number' + number_index + '.$error.pattern']}" class="help-block col-sm-11" translate>Номер может состоять только из чисел</div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="panel panel-default" ng-show="canConfigureVoice">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Передача в голосовом канале GSM</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-6 col-lg-6" ng-repeat="(sim_index, sim_numbers) in channels().voice">
        <form class="form-horizontal" role="form" name="VoiceForm">
          <div class="form-group" ng-repeat="(number_index, number) in channels().voice[sim_index] track by $index"
               ng-class="{['VoiceForm.Number' + number_index + '.$invalid?\'has-error\':\'\'']}">
            <label class="col-sm-5 control-label" translate>Номер {[ number_index + 1 ]} для SIM {[ sim_index + 1 ]}</label>
            <div class="col-sm-6">
              <input type="text" size="14" class="form-control" ng-model="sim_numbers[number_index]" ng-change="formGuard(VoiceForm)"
                     ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                     ng-maxlength="20" name="{['Number' + number_index]}"
                     ng-pattern="/^\+?[0-9]+$/">
            </div>
            <div ng-show="{['VoiceForm.Number' + number_index + '.$error.maxlength']}" class="help-block col-sm-11" translate>Номер не может быть длиннее 20 символов</div>
            <div ng-show="{['VoiceForm.Number' + number_index + '.$error.pattern']}" class="help-block col-sm-11" translate>Номер может состоять только из чисел</div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="panel panel-default" ng-show="canConfigureSms">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Передача по SMS</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-6 col-lg-6" ng-repeat="(sim_index, sim_number) in channels().sms track by $index">
        <form class="form-horizontal" role="form" name="SMSForm">
          <div class="form-group"
               ng-class="SMSForm.Number.$invalid?'has-error':''">
              <label class="col-sm-5 control-label" translate>Номер для SIM {[ sim_index + 1 ]}</label>
              <div class="col-sm-6">
                <input type="text" size="14" class="form-control" ng-model="channels().sms[sim_index]"
                       name="Number"
                       ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                       ng-change="formGuard(SMSForm)" ng-maxlength="20"
                       ng-pattern="/^\+?[0-9]+$/">
              </div>
              <div class="row">
                <div ng-show="SMSForm.Number.$error.maxlength"
                     class="help-block col-sm-11 col-sm-offset-1" translate>Номер не может быть длиннее 20 символов</div>
                <div ng-show="SMSForm.Number.$error.pattern"
                     class="help-block col-sm-11 col-sm-offset-1" translate>Номер может состоять только из чисел</div>
              </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="panel panel-default" ng-show="canConfigureIncomingCalls || canConfigureExtGsmAntenna">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Настройки GSM</h3>
  </div>
  <div class="panel-body">
    <form class="form-horizontal">

      <div class="form-group" ng-if="canConfigureIncomingCalls">
        <div class="col-md-8">
          <div class="checkbox">
            <label class="control-label">
              <input type="checkbox"
                     ng-model="misc().incoming_call_enabled"
                     ng-true-value="1"
                     ng-false-value="0">
              <translate>Разрешить входящие звонки и SMS</translate>
            </label>
          </div>
        </div>
      </div>

      <div class="form-group" ng-if="canConfigureExtGsmAntenna">
        <div class="col-md-8">
          <div class="checkbox">
            <label class="control-label">
              <input type="checkbox"
                     ng-model="misc().gsm_use_ext_ant"
                     ng-true-value="1"
                     ng-false-value="0">
              <translate>Использовать внешнюю антенну для передачи по GSM</translate>
            </label>
          </div>
        </div>
      </div>

    </form>
  </div>
</div>
