browser/apps/web/src/app/billing/organizations/secrets-manager/sm-adjust-subscription.component.html

<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-form-field class="tw-w-1/2">
    <bit-label>{{ "subscriptionSeats" | i18n }}</bit-label>
    <input bitInput id="smSeatCount" formControlName="seatCount" type="number" step="1" />
    <bit-hint>
      <strong>{{ "total" | i18n }}:</strong>
      {{ formGroup.value.seatCount }} &times; {{ options.seatPrice | currency }} =
      {{ seatTotal | currency }} / {{ options.interval | i18n }}
    </bit-hint>
  </bit-form-field>
  <bit-form-control>
    <bit-label>{{ "limitSubscription" | i18n }}</bit-label>
    <input type="checkbox" bitCheckbox id="limitSmSeats" formControlName="limitSeats" />
    <bit-hint>
      {{ "limitSmSubscriptionDesc" | i18n }}
    </bit-hint>
  </bit-form-control>
  <bit-form-field class="tw-w-1/2" *ngIf="formGroup.value.limitSeats">
    <bit-label>{{ "maxSeatLimit" | i18n }}</bit-label>
    <input
      bitInput
      id="smSeatLimit"
      formControlName="seatLimit"
      type="number"
      step="1"
      [min]="formGroup.value.seatCount"
    />
    <bit-hint>
      <strong>{{ "total" | i18n }}:</strong>
      {{ formGroup.value.seatLimit || 0 }} &times; {{ options.seatPrice | currency }} =
      {{ maxSeatTotal | currency }} / {{ options.interval | i18n }}
    </bit-hint>
  </bit-form-field>
  <bit-form-field class="tw-w-1/2">
    <bit-label>{{ "additionalServiceAccounts" | i18n }}</bit-label>
    <input
      bitInput
      id="additionalServiceAccountCount"
      formControlName="serviceAccountCount"
      type="number"
      step="1"
      min="0"
    />
    <bit-hint>
      <div>
        {{
          "additionalServiceAccountsDesc"
            | i18n : options.baseServiceAccountCount : (monthlyServiceAccountPrice | currency)
        }}
      </div>
      <div>
        <strong>{{ "total" | i18n }}:</strong>
        {{ formGroup.value.serviceAccountCount || 0 }} &times;
        {{ options.additionalServiceAccountPrice | currency }} =
        {{ serviceAccountTotal | currency }} / {{ options.interval | i18n }}
      </div>
    </bit-hint>
  </bit-form-field>
  <bit-form-control>
    <bit-label>{{ "limitServiceAccounts" | i18n }}</bit-label>
    <input
      type="checkbox"
      bitCheckbox
      id="limitServiceAccounts"
      formControlName="limitServiceAccounts"
    />
    <bit-hint>
      {{ "limitServiceAccountsDesc" | i18n }}
    </bit-hint>
  </bit-form-control>
  <bit-form-field class="tw-w-1/2" *ngIf="formGroup.value.limitServiceAccounts">
    <bit-label>{{ "serviceAccountLimit" | i18n }}</bit-label>
    <input
      bitInput
      id="additionalServiceAccountLimit"
      formControlName="serviceAccountLimit"
      type="number"
      step="1"
      [min]="formGroup.value.serviceAccountCount"
    />
    <bit-hint>
      <strong>{{ "total" | i18n }}:</strong>
      {{ formGroup.value.serviceAccountLimit || 0 }} &times;
      {{ options.additionalServiceAccountPrice | currency }} =
      {{ maxServiceAccountTotal | currency }} / {{ options.interval | i18n }}
    </bit-hint>
  </bit-form-field>
  <button type="submit" bitButton buttonType="primary" bitFormButton>
    {{ "save" | i18n }}
  </button>
  <bit-error-summary [formGroup]="formGroup" class="tw-mt-2"></bit-error-summary>
</form>