cosmos-explorer/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

<div>
  <div>
    <p class="pkPadding">
      <!-- ko if: showAsMandatory -->
      <span class="mandatoryStar">*</span>
      <!-- /ko -->

      <span data-bind="text: label"></span>

      <!-- ko if: infoBubbleText -->
      <span class="infoTooltip" role="tooltip" tabindex="0">
        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
      </span>
      <!-- /ko -->
    </p>
  </div>

  <!-- ko if: !isFixed -->
  <div class="throughputModeContainer">
    <input
      class="throughputModeRadio"
      aria-label="Autopilot mode"
      type="radio"
      role="radio"
      tabindex="0"
      data-bind="
          checked: isAutoPilotSelected,
          checkedValue: true,
          attr: {
            id: throughputAutoPilotRadioId,
            name: throughputModeRadioName,
            'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
          }"
    />
    <span
      class="throughputModeSpace"
      data-bind="
          attr: {
            for: throughputAutoPilotRadioId
          }"
      >Autoscale
    </span>

    <input
      class="throughputModeRadio nonFirstRadio"
      aria-label="Manual mode"
      type="radio"
      role="radio"
      tabindex="0"
      data-bind="
          checked: isAutoPilotSelected,
          checkedValue: false,
          attr: {
            id:  throughputProvisionedRadioId,
            name: throughputModeRadioName,
            'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
          }"
    />
    <span
      class="throughputModeSpace"
      data-bind="attr: {
          for: throughputProvisionedRadioId
        }"
      >Manual
    </span>
  </div>
  <!-- /ko -->

  <div data-bind="visible: isAutoPilotSelected">
    <p>
      <span
        >Provision maximum RU/s required by this resource. Estimate your required RU/s with
        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a>.</span
      >
    </p>
    <p>
      <span>Max RU/s</span>
    </p>
    <div data-bind="setTemplateReady: true">
      <input
        data-bind="textInput: overrideWithProvisionedThroughputSettings() ? '' : maxAutoPilotThroughputSet, attr:{
        disabled: overrideWithProvisionedThroughputSettings(),
        step: step,
        'class':'migration collid select-font-size',
        min: minAutoPilotThroughput,
        'aria-label': 'Max request units per second',
        type: isAutoscaleThroughputInputFieldRequired() ? 'number' : 'hidden',
        css: {
          dirty: maxAutoPilotThroughputSet.editableIsDirty
      }
    }"
      />
    </div>
    <p data-bind="visible: overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()">
      <span
        data-bind="
              html: autoPilotUsageCost"
      ></span>
    </p>
    <p
      data-bind="visible: costsVisible && overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()"
    >
      <span data-bind="html: requestUnitsUsageCost"></span>
    </p>

    <!-- ko if: spendAckVisible -->
    <p class="pkPadding">
      <input
        type="checkbox"
        aria-label="acknowledge spend throughput"
        data-bind="
            attr: {
              title: spendAckText,
              id: spendAckId
            },
            checked: spendAckChecked"
      />
      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
    </p>
    <!-- /ko -->

    <!-- ko if: isFixed -->
    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
    <!-- /ko -->
  </div>

  <div data-bind="visible: !isAutoPilotSelected()">
    <p>
      <span
        >Estimate your required throughput with
        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a></span
      >
    </p>

    <div class="inputTooltip">
      <span
        data-bind="text: freeTierExceedThroughputTooltip, visible: showFreeTierExceedThroughputTooltip"
        class="inputTooltipText"
      ></span>
    </div>

    <div data-bind="setTemplateReady: true">
      <input
        data-bind="
            textInput: overrideWithAutoPilotSettings() ? maxAutoPilotThroughputSet : value,
            css: {
                dirty: value.editableIsDirty
            },
            enable: isEnabled,
            attr:{
                type: isManualThroughputInputFieldRequired() ? 'number' : 'hidden',
                'data-test': testId,
                'class': cssClass,
                step: step,
                min: minimum,
                max: canExceedMaximumValue() ? null : maximum,
                'aria-label': ariaLabel,
                disabled: overrideWithAutoPilotSettings(),
                required: isManualThroughputInputFieldRequired()
            }"
      />
    </div>

    <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
      <span class="freeTierWarningIcon"><img src="/warning.svg" alt="Warning" /></span>
      <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
    </div>

    <p data-bind="visible: costsVisible">
      <span data-bind="html: requestUnitsUsageCost"></span>
    </p>

    <!-- ko if: spendAckVisible -->
    <p class="pkPadding">
      <input
        type="checkbox"
        aria-label="acknowledge spend throughput"
        data-bind="
        attr: {
          title: spendAckText,
          id: spendAckId
        },
        checked: spendAckChecked"
      />
      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
    </p>
    <!-- /ko -->

    <!-- ko if: isFixed -->
    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
    <!-- /ko -->
  </div>
</div>