cosmos-explorer/src/Explorer/Panes/DeleteCollectionConfirmationPane.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" id="deletecollectionconfirmationpane">
    <!-- Delete Collection Confirmation form - Start -->
    <div class="contextual-pane-in">
      <form
        class="paneContentContainer"
        data-bind="
                    submit: submit"
      >
        <!-- Delete Collection Confirmation header - Start -->
        <div class="firstdivbg headerline">
          <span role="heading" aria-level="2" data-bind="text: title"></span>
          <div
            class="closeImg"
            role="button"
            aria-label="Close pane"
            tabindex="0"
            data-bind="
                            click: cancel, event: { keypress: onCloseKeyPress }"
          >
            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
          </div>
        </div>
        <!-- Delete Collection Confirmation header - End -->

        <div class="warningErrorContainer" data-bind="visible: !formErrors()">
          <div class="warningErrorContent">
            <span><img class="paneWarningIcon" src="/warning.svg" alt="Warning"/></span>
            <span class="warningErrorDetailsLinkContainer">
              Warning! The action you are about to take cannot be undone. Continuing will permanently delete this
              resource and all of its children resources.
            </span>
          </div>
        </div>

        <!-- Delete Collection Confirmation 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="click: showErrorDetails">More details</a>
            </span>
          </div>
        </div>
        <!-- Delete Collection Confirmation errors - End -->

        <!-- Delete Collection Confirmation inputs - Start -->
        <div class="paneMainContent">
          <div>
            <span class="mandatoryStar">*</span> <span data-bind="text: collectionIdConfirmationText"></span>
            <p>
              <input
                type="text"
                data-test="confirmCollectionId"
                name="collectionIdConfirmation"
                required
                class="collid"
                data-bind="value: collectionIdConfirmation, hasFocus: firstFieldHasFocus, attr: { 'aria-label': collectionIdConfirmationText }"
              />
            </p>
          </div>
          <div data-bind="visible: recordDeleteFeedback">
            <div>Help us improve Azure Cosmos DB!</div>
            <div>What is the reason why you are deleting this container?</div>
            <p>
              <textarea
                type="text"
                data-test="containerDeleteFeedback"
                name="containerDeleteFeedback"
                rows="3"
                cols="53"
                class="collid"
                maxlength="512"
                data-bind="value: containerDeleteFeedback"
                aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this container?"
              >
              </textarea>
            </p>
          </div>
        </div>
        <div class="paneFooter">
          <div class="leftpanel-okbut">
            <input type="submit" data-test="deleteCollection" value="OK" class="btncreatecoll1" />
          </div>
        </div>
        <!-- Delete Collection Confirmation inputs - End -->
      </form>
    </div>
    <!-- Delete Collection Confirmation form - End -->
    <!-- Loader - Start -->
    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
    </div>
    <!-- Loader - End -->
  </div>
</div>