cosmos-explorer/src/Explorer/Panes/AddDatabasePane.html

<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
  <div class="contextual-pane" data-bind="attr: { id: id }">
    <!-- Add database form  -- Start -->
    <div class="contextual-pane-in">
      <form data-bind="submit: submit" style="height: 100%">
        <div
          class="paneContentContainer"
          role="dialog"
          aria-labelledby="databaseTitle"
          data-bind="template: { name: 'add-database-inputs' }"
        ></div>
      </form>
    </div>
    <!-- Add database form  -- End -->
    <!-- Loader - Start -->
    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
    </div>
    <!-- Loader - End -->
  </div>
</div>

<script type="text/html" id="add-database-inputs">
                                <!-- Add database header - Start -->
  <div class="firstdivbg headerline">
      <span id="databaseTitle" data-bind="text: title"></span>
      <div class="closeImg" role="button" aria-label="Close pane"
          data-bind="click: cancel, event: { keypress: onCloseKeyPress }" tabindex="0">
          <img src="../../../images/close-black.svg" title="Close" alt="Close" />
      </div>
  </div>
  <!-- Add database header - End -->

  <!-- Add database errors - Start -->
  <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
      <div class="warningErrorContent">
          <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error"></span>
          <span class="warningErrorDetailsLinkContainer">
              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
              <a class="errorLink" role="link"
                  data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails, event: { keypress: onMoreDetailsKeyPress }"
                  tabindex="0">
                  More details</a>
          </span>
      </div>
  </div>
  <!-- Add database errors - End -->

  <!-- upsell message - start -->
  <div class="infoBoxContainer" aria-live="assertive" data-bind="visible: formErrors && !formErrors()">
      <div class="infoBoxContent">
          <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo"></span>
          <span class="infoBoxDetails">
              <span class="infoBoxMessage" data-bind="text: upsellMessage, attr: { title: upsellMessage }"></span>
              <a class="underlinedLink" id="linkAddDatabase" data-bind="text: upsellAnchorText, attr: { 'href': upsellAnchorUrl, 'aria-label': upsellMessageAriaLabel }"
                  target="_blank" href="" tabindex="0"></a>
          </span>
      </div>
  </div>
  <!-- upsell message - end -->

  <!-- Add database inputs - Start -->
  <div class="paneMainContent">
      <div>
          <p>
              <span class="mandatoryStar">*</span>
              <span data-bind="text: databaseIdLabel"></span>
              <span class="infoTooltip" role="tooltip" tabindex="0">
                  <img class="infoImg" src="/info-bubble.svg" alt="More information">
                  <span class="tooltiptext infoTooltipWidth" data-bind="text: databaseIdTooltipText"></span>
              </span>
          </p>

          <input id="database-id" type="text" aria-required="true" autocomplete="off" pattern="[^/?#\\]*[^/?# \\]"
              title="May not end with space nor contain characters '\' '/' '#' '?'" placeholder="Type a new database id"
              size="40" class="collid" data-bind="textInput: databaseId, hasFocus: firstFieldHasFocus"
              aria-label="Database id" autofocus>
          <div class="databaseProvision" aria-label="New database provision support">
              <input tabindex="0" type="checkbox" id="addDatabasePane-databaseSharedThroughput"
                  title="Provision shared throughput" data-bind="checked: databaseCreateNewShared" />
              <span class="databaseProvisionText" for="databaseSharedThroughput">Provision throughput</span>
              <span class="infoTooltip" role="tooltip" tabindex="0">
                  <img class="infoImg" src="/info-bubble.svg" alt="More information">
                  <span class="tooltiptext provisionDatabaseThroughput"
                      data-bind="text: databaseLevelThroughputTooltipText"></span>
              </span>
          </div>
          <!-- ko if: hasAutoPilotV2FeatureFlag && !hasAutoPilotV2FeatureFlag() -->
          <div data-bind="visible: databaseCreateNewShared">
              <throughput-input-autopilot-v3 params="{
                                              step: 100,
                                              value: throughput,
                                              testId: 'sharedThroughputValue',
                                              minimum: minThroughputRU,
                                              maximum: maxThroughputRU,
                                              isEnabled: databaseCreateNewShared,
                                              label: throughputRangeText,
                                              ariaLabel: throughputRangeText,
                                              costsVisible: costsVisible,
                                              requestUnitsUsageCost: requestUnitsUsageCost,
                                              spendAckChecked: throughputSpendAck,
                                              spendAckId: 'throughputSpendAckDatabase',
                                              spendAckText: throughputSpendAckText,
                                              spendAckVisible: throughputSpendAckVisible,
                                              showAsMandatory: true,
                                              infoBubbleText: ruToolTipText,
                                              throughputAutoPilotRadioId: 'newDatabase-databaseThroughput-autoPilotRadio',
                                              throughputProvisionedRadioId: 'newDatabase-databaseThroughput-manualRadio',
                                              throughputModeRadioName: 'throughputModeRadioName',
                                              isAutoPilotSelected: isAutoPilotSelected,
                                              maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
                                              autoPilotUsageCost: autoPilotUsageCost,
                                              canExceedMaximumValue: canExceedMaximumValue,
                                              showAutoPilot: !isFreeTierAccount()
                                          }">
              </throughput-input-autopilot-v3>
              <p data-bind="visible: canRequestSupport">
                  <!-- TODO: Replace link with call to the Azure Support blade --><a
                      href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request">Contact
                      support</a> for more than <span data-bind="text: maxThroughputRUText"></span> RU/s.</p>
          </div>
          <!-- /ko -->
          <!-- ko if: hasAutoPilotV2FeatureFlag && hasAutoPilotV2FeatureFlag() -->
          <div data-bind="visible: databaseCreateNewShared">
              <throughput-input params="{
                                                  step: 100,
                                                  value: throughput,
                                                  testId: 'sharedThroughputValue',
                                                  minimum: minThroughputRU,
                                                  maximum: maxThroughputRU,
                                                  isEnabled: databaseCreateNewShared,
                                                  label: throughputRangeText,
                                                  ariaLabel: throughputRangeText,
                                                  costsVisible: costsVisible,
                                                  requestUnitsUsageCost: requestUnitsUsageCost,
                                                  spendAckChecked: throughputSpendAck,
                                                  spendAckId: 'throughputSpendAckDatabase',
                                                  spendAckText: throughputSpendAckText,
                                                  spendAckVisible: throughputSpendAckVisible,
                                                  showAsMandatory: true,
                                                  infoBubbleText: ruToolTipText,
                                                  throughputAutoPilotRadioId: 'newDatabase-databaseThroughput-autoPilotRadio',
                                                  throughputProvisionedRadioId: 'newDatabase-databaseThroughput-manualRadio',
                                                  throughputModeRadioName: 'throughputModeRadioName',
                                                  isAutoPilotSelected: isAutoPilotSelected,
                                                  autoPilotTiersList: autoPilotTiersList,
                                        selectedAutoPilotTier: selectedAutoPilotTier,
                                                  autoPilotUsageCost: autoPilotUsageCost,
                                                  canExceedMaximumValue: canExceedMaximumValue
                                              }">
              </throughput-input>
              <p data-bind="visible: canRequestSupport">
                  <!-- TODO: Replace link with call to the Azure Support blade --><a
                      href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request">Contact
                      support</a> for more than <span data-bind="text: maxThroughputRUText"></span> RU/s.</p>
          </div>
          <!-- /ko -->
          <!-- Database provisioned throughput - End -->
      </div>
  </div>
  <div class="paneFooter">
      <div class="leftpanel-okbut">
          <input type="submit" value="OK" class="btncreatecoll1">
      </div>
  </div>
  <!-- Add database inputs - End -->
</script>