<div class="modal-header">
  <h3 translate>Введите номер ТМ-ключа</h3>
</div>

<form role="form" name="TMKeyEntryForm">

  <div class="modal-body">
    <div class="row">

      <div class="col-md-5">
        <img style="width:100%;margin-top:51px;" ng-src="{[ '/images/tm-key-entry.png' | augeasStatic ]}"/>
      </div>

      <div class="col-md-7">

        <div class="row form-group">
          <div class="col-md-12">
            <label class="control-label" translate>Код семейства</label>
            <span class="label-help" translate>Для ТМ-ключей код семейства — 01</span>
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control glamour-green" readonly="readonly" name="keyFamily"
                ng-model="keyFamily">
          </div>
        </div>

        <div class="row form-group">
          <div class="col-md-12">
            <label class="control-label" translate>Номер ключа</label>
            <span class="label-help" translate>12-значный идентификатор устройства</span>
          </div>
          <div class="col-md-7" ng-class="invalidCRC()?'has-error':''">
            <input type="text" class="form-control text-uppercase glamour-blue" name="keyNumber"
                ng-model="keyNumber" required
                ng-pattern="/^[a-fA-F0-9]{12}$/"
                only-chars="/[a-fA-F0-9]/"
                maxlength="12"
                ng-change="onKeyNumberChanged()"
                ng-model-options="{ updateOn: 'default blur', debounce: { default: 200, blur: 0 } }">
          </div>
        </div>

        <div class="row form-group">
          <div class="col-md-12">
            <label class="control-label" translate>Контрольная сумма</label>
            <span class="label-help" translate>Значение, рассчитанное по номеру ключа</span>
          </div>
          <div class="col-md-3" ng-class="invalidCRC()?'has-error':''">
            <input type="text" class="form-control text-uppercase glamour-violet" name="keyCRC"
                ng-model="keyCRC" required
                ng-pattern="/^[a-fA-F0-9]{2}$/"
                only-chars="/[a-fA-F0-9]/"
                maxlength="2"
                ng-model-options="{ updateOn: 'default blur', debounce: { default: 200, blur: 0 } }">
          </div>
        </div>

        <div class="row">
          <div class="col-md-12 text-danger" ng-show="invalidCRC()" translate>
            Контрольная сумма или номер ключа введены неверно
          </div>
          <div class="col-md-12 text-danger" ng-show="isDuplicatedKey" translate>
            Такой ключ уже зарегистрирован
          </div>
        </div>

      </div>

    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-success" ng-click="addKeyAndClose()" ng-disabled="!TMKeyEntryForm.$valid || invalidCRC()" translate>OK</button>
    <button class="btn btn-default" ng-click="$dismiss('canceled')" translate>Отмена</button>
  </div>

</form>
