<div class="card card-highlight">
  <div class="card-header separator">
    <div class="card-title text-truncate" title="{{ 'Subscription registration' | translate }}">
      <i c8y-icon="c8y-connector-in c8y-icon-duocolor"></i>
      <span>{{ 'Create new subscription' | translate }}</span>
    </div>
  </div>
  
  <div class="card-block">
    <p title="{{ 'Register new subscription' | translate }}" translate class="m-b-8">
      Insert code provided by source tenant.
    </p>
    <form name="addSubscriptionForm" novalidate>
      <div class="form-group">
        <div class="input-group">
          <input
            name="code"
            class="form-control"
            type="text"
            placeholder="{{ 'Insert security code' | translate }}"
            ng-required="true"
            ng-model="vm.code"
            c8y-validate-url-segment
          />
          <span class="input-group-btn">
            <button
              title="{{ 'Submit' | translate }}"
              type="submit"
              class="btn btn-primary"
              ng-click="vm.addSubscription()"
              ng-disabled="addSubscriptionForm.$invalid"
            >
              {{ 'Submit' | translate }}
            </button>
          </span>
        </div>
        <c8y-error-feedback field="addSubscriptionForm.code"></c8y-error-feedback>
      </div>
    </form>
    <small class="text-muted">
      <em translate>Subscribed devices are charged as normal devices.</em>
    </small>
  </div>
</div>
