<div>
<div class="" data-dojo-attach-point="visibiltyWidget">
    <div class="esriCTFullWidth esriCTNewHeader">
<!-- Panel Title -->
<div class="esriCTMainTitleDiv esriCTEllipsis" title="${nls.mainPageTitle}">
  ${nls.mainPageTitle}
  </div>
  <!-- Settings Icon -->
  <div class="esriCTRightSideButton">
    <div class="esriCTSettingsIcon esriCTPointer" title="${nls.settingsTitle}" tabindex="0" role='button'
    aria-label='${nls.settingsTitle}' data-dojo-attach-point="settingsIcon"></div>
  <div class="esriCTSaveToLayerIcon esriCTPointer esriCTHidden" title="${nls.resultsTitle}" tabindex="0"  role='button' aria-label='${nls.resultsTitle}' data-dojo-attach-point="saveToLayerIcon"></div>
  </div>

  <label data-dojo-attach-point="errorText" style="display: none"></label>
  <div class="controls" data-dojo-attach-point="controls">
    <div class="controlGroup">
      <div data-dojo-attach-point="observerCoordsContainer"></div>
    </div>
    <div class="controlGroup">
      <label class="titleLabel" data-dojo-attach-point="FOVLabel">${nls.fieldOfView}</label>
      <div class="center" data-dojo-attach-point="FOVGroup">
        <input type="text" value="360" class="fov" data-displayInput="true" data-cursor="true" disabled="true"
          data-dojo-attach-point="FOVInput" aria-label="${nls.fieldOfView}" />
        <p class="cursortooltip" data-dojo-attach-point="tooltip" hidden='true'></p>
      </div>
    </div>
    <div class="controlGroup">
      <input class="switch-toggle" data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="angleUnits" checked="false" aria-label="${nls.useMilsText}"/>
      <label class="titleLabel">${nls.useMilsText}</label>
    </div>
    <div class="controlGroup">
      <label class="titleLabel">${nls.observerHeight}</label>
      <div>
        <input class="inputNumberTextbox" data-dojo-type='dijit/form/NumberTextBox' required="true" value="2"
          data-dojo-props='
          constraints: {min: 0},
          invalidMessage: "${nls.invalidMessage}",
          rangeMessage: "${nls.observerRangeMessage}"'
          data-dojo-attach-point="observerHeight" aria-label="${nls.observerHeight}">
        <select style="width: 100px" class="controlSpace noResize" data-dojo-type="jimu/dijit/formSelect"
          data-dojo-attach-point="observerHeightDD" aria-label="${nls.observerHeight}">
        </select>
      </div>
    </div>
    <div class="controlGroup">
      <label class="titleLabel">${nls.minObsDistance}</label>
      <div>
        <input class="inputNumberTextbox" data-dojo-type='dijit/form/NumberTextBox' required="true" value="3"
          data-dojo-props='constraints: {min: 0}' data-dojo-attach-point="minObsRange" aria-label="${nls.minObsDistance}">
        <select style="width: 100px" class="controlSpace noResize" data-dojo-type="jimu/dijit/formSelect"
          data-dojo-attach-point="distanceUnitDD" aria-label="${nls.minObsDistance}">
        </select>
      </div>
    </div>
    <div class="controlGroup">
      <label class="titleLabel">${nls.maxObsDistance}</label>
      <div>
        <input class="inputNumberTextbox" data-dojo-type='dijit/form/NumberTextBox' required="true" value="5"
          data-dojo-props='constraints: {min: 0}' data-dojo-attach-point="maxObsRange" aria-label="${nls.maxObsDistance}">
      </div>
    </div>
    <div class="buttonContainer" data-dojo-attach-point="buttonContainer">
      <div class="btnContainer HalfWidthLeft">
        <div class="jimu-btn" data-dojo-attach-point="btnCreate" tabindex="0" role="button" aria-label="${nls.createBtn}">${nls.createBtn}</div>
      </div>
      <div class="btnContainer HalfWidthRight">
        <div class="jimu-btn controlSpace" data-dojo-attach-point="btnClear" tabindex="0" role="button" aria-label="${nls.clearBtn}">${nls.clearBtn}</div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="esriCTHidden" data-dojo-attach-point="portalPublishContainer"></div>
<div class="esriCTHidden" data-dojo-attach-point="settingsContainer">
  <div>
    <div class="esriCTFullWidth esriCTSettingHeader">
      <div class="esriCTBackButton" title="${nls.back}">
        <div class="esriCTItemLeftArrow" data-dojo-attach-point="settingsPanelBackButton" tabindex="0"
          aria-label="${nls.back}" role="button"></div>
        <div class="esriCTTitleDiv esriCTEllipsis" title="${nls.settingsTitle}">${nls.settingsTitle}</div>
      </div>
    </div>
    <div class="esriCTMainPageRow">
      <div style="overflow: hidden;" data-dojo-attach-point="symbologySettingsNode"></div>
    </div>
  </div>
</div>
</div>