cosmos-explorer/src/Explorer/Panes/SaveQueryPane.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="savequerypane">
    <!-- Save Query form  -- Start -->
    <div class="contextual-pane-in">
      <form class="paneContentContainer" data-bind="submit: submit">
        <!-- Save Query 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">
            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
          </div>
        </div>
        <!-- Save Query header - End -->

        <!-- Save Query 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"
                >More details</a
              >
            </span>
          </div>
        </div>
        <!-- Save Query errors - End -->

        <!-- Save Query inputs - Start -->
        <div class="paneMainContent">
          <div class="pkPadding" data-bind="visible: !canSaveQueries()">
            <div data-bind="text: setupSaveQueriesText"></div>
            <button class="btncreatecoll1 btnSetupQueries" type="button" data-bind="click: setupQueries">
              Complete setup
            </button>
          </div>
          <div class="pkPadding" data-bind="visible: canSaveQueries">
            <p><span class="mandatoryStar">*</span> <span>Name</span></p>
            <input class="textfontclr collid" required type="text" data-bind="value: queryName" />
          </div>
        </div>
        <div class="paneFooter" data-bind="visible: canSaveQueries">
          <div class="leftpanel-okbut"><input type="submit" value="Save" class="btncreatecoll1" /></div>
        </div>
        <!-- Save Query inputs - End -->
      </form>
    </div>
    <!-- Save Query form  - Start -->
    <!-- Loader - Start -->
    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
    </div>
    <!-- Loader - End -->
  </div>
</div>