cosmos-explorer/src/Explorer/Panes/LoadQueryPane.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="loadQueryPane">
    <!-- Load Query form  -- Start -->
    <div class="contextual-pane-in">
      <form class="paneContentContainer" data-bind="submit: submit">
        <!-- Load 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, event: { keypress: onCloseKeyPress }"
          >
            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
          </div>
        </div>
        <!-- Load Query header - End -->

        <!-- Load 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>
        <!-- Load Query errors - End -->

        <!-- Load Query inputs - Start -->
        <div class="paneMainContent">
          <div>
            <div class="renewUploadItemsHeader">Select a query document</div>
            <input
              class="importFilesTitle"
              type="text"
              role="textbox"
              disabled
              data-bind="value: selectedFilesTitle"
              aria-label="Select a query document"
              autofocus
            />
            <input
              type="file"
              id="importQueryInput"
              accept="text/plain"
              style="display: none"
              data-bind="event: { change: updateSelectedFiles }"
            />
            <a
              href="#"
              id="queryFileImportLink"
              aria-label="Upload files"
              tabindex="0"
              role="button"
              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
            >
              <img class="fileImportImg" src="/folder_16x16.svg" alt="upload files" title="upload files" />
            </a>
          </div>
        </div>
        <div class="paneFooter">
          <div class="leftpanel-okbut"><input type="submit" value="Load" class="btncreatecoll1" /></div>
        </div>
        <!-- Load Query inputs - End -->
      </form>
    </div>
    <!-- Load 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>