<div class="container-fluid">
  <div class="row">
    <div class="col-md-6" ng-repeat="(_, columnIndices) in indices">
      <div ng-repeat="(_, index) in columnIndices">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title" translate>Оператор {[ index + 1 ]}</h3>
          </div>
          <div class="panel-body">
            <form role="form" class="form-horizontal" name="CSPForm">
              <div class="form-group row" ng-class="CSPForm.name.$invalid?'has-error':''">
                <label class="col-md-5 control-label" translate>Название</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="name"
                    ng-model="csps(index).name" required
                    ng-pattern="/^[a-zA-Z0-9 ,.-]+$/"
                    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                    ng-maxlength="20"
                    ng-change="formGuard(CSPForm)"
                    ng-disabled="!desktopMode">
                  <div ng-show="CSPForm.name.$error.pattern" class="help-block" translate>
                    Допустимые символы &ndash; буквы латинского алфавита,
                    знаки препинания и цифры
                  </div>
                  <div ng-show="CSPForm.name.$error.maxlength" class="help-block" translate>
                    Название не может быть длиннее 20 символов
                  </div>
                  <div ng-show="CSPForm.name.$error.required" class="help-block" translate>
                    Название не может быть пустым
                  </div>
                </div>
              </div>
              <div class="form-group row" ng-class="CSPForm.plmn.$invalid?'has-error':''">
                <label class="col-md-5 control-label" translate>Номер сети (PLMN)</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="plmn"
                    ng-model="csps(index).plmn" required
                    ng-pattern="/^\d+$/"
                    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                    ng-maxlength="6"
                    ng-change="formGuard(CSPForm)"
                    ng-disabled="!desktopMode">
                  <div ng-show="CSPForm.plmn.$error.pattern" class="help-block" translate>
                    Допустимые символы &ndash; только цифры
                  </div>
                  <div ng-show="CSPForm.plmn.$error.maxlength" class="help-block" translate>
                    Номер сети не может быть длиннее 6 символов
                  </div>
                  <div ng-show="CSPForm.plmn.$error.required" class="help-block" translate>
                    Номер сети не может быть пустым
                  </div>
                </div>
              </div>
              <div class="form-group row" ng-class="CSPForm.apn.$invalid?'has-error':''">
                <label class="col-md-5 control-label" translate>Точка доступа</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="apn"
                    ng-model="csps(index).apn" required
                    ng-pattern="/^[a-zA-Z0-9 ,.\-@]+$/"
                    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                    ng-maxlength="48"
                    ng-change="formGuard(CSPForm)"
                    ng-disabled="!desktopMode">
                  <div ng-show="CSPForm.apn.$error.pattern" class="help-block" translate>
                    Допустимые символы &ndash; буквы латинского алфавита,
                    знаки препинания, @ и цифры
                  </div>
                  <div ng-show="CSPForm.apn.$error.maxlength" class="help-block" translate>
                    Название точки доступа не должно быть длиннее 48 символов
                  </div>
                  <div ng-show="CSPForm.apn.$error.required" class="help-block" translate>
                    Название не может быть пустым</div>
                </div>
              </div>
              <div class="form-group row" ng-class="CSPForm.user.$invalid?'has-error':''">
                <label class="col-md-5 control-label" translate>Имя пользователя</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="user"
                    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                    ng-model="csps(index).user"
                    ng-maxlength="32"
                    ng-change="formGuard(CSPForm)"
                    ng-disabled="!desktopMode">
                  <div ng-show="CSPForm.user.$error.maxlength" class="help-block" translate>
                    Имя пользователя не должно быть длиннее 32 символов
                  </div>
                </div>
              </div>
              <div class="form-group row" ng-class="CSPForm.password.$invalid?'has-error':''">
                <label class="col-md-5 control-label" translate>Пароль</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="password"
                    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
                    ng-model="csps(index).password"
                    ng-maxlength="32"
                    ng-change="formGuard(CSPForm)"
                    ng-disabled="!desktopMode">
                  <div ng-show="CSPForm.password.$error.maxlength" class="help-block" translate>
                    Пароль не должен быть длиннее 32 символов.
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
