<div class="tabPanel" data-dojo-attach-point="rangeContainer">
  <div class="controls">
    <div class="controlGroup">
      <label>${nls.lineTypeLabel}</label>
      <div class="controlItem">
        <select aria-label="${nls.lineTypeLabel}" data-dojo-attach-point="rangeType" style="width: 100%;"
          data-dojo-type="jimu/dijit/formSelect" class="esriCTDropdownObj">
          <option selected="selected" value="Interactive">${nls.interactiveLabel}</option>
          <option value="Fixed">${nls.fixedLabel}</option>
          <option value="Origin">${nls.originLabel}</option>
          <option value="Cumulative">${nls.cumulativeLabel}</option>
        </select>
      </div>
    </div>
    <div class="controlGroup">
      <label data-dojo-attach-point='rangeCenterLabel'>${nls.centerPointLabel}</label>
      <div class="controlItem">
        <div class="jimu-input coordInput" placeholder="${nls.startPointPlaceHolderLabel}"
          data-dojo-attach-point="rangeCenter">
        </div>
        <div class="controlItem paddedLeft">
          <div class='add-with-icon'>
            <span title="${nls.formatInputLabel}" class="jimu-icon settingBtn safariOnly"
              data-dojo-attach-point="coordinateFormatButton" tabindex="0" role="button"
              aria-label="${nls.formatInputLabel}"></span>
          </div>
          <div class='add-with-icon'>
            <div title="${nls.addPointLabel}" class="drawPointBtn" data-dojo-attach-point="addPointBtn" tabindex="0"
              role="button" aria-label="${nls.addPointLabel}"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="controlGroup controlGroupHidden" data-dojo-attach-point="numRingsContainer">
      <label>${nls.numberOfRingsLabel}</label>
      <div class="controlItem" data-dojo-attach-point="numRingsDiv">
        <input aria-label="${nls.numberOfRingsLabel}" data-dojo-attach-point="numRingsInput" type="text"
          data-dojo-type="dijit/form/NumberTextBox" name="numRings" required="true" , value="5"
          data-dojo-props="constraints:{min:1, max: 100, places: 0}" />
      </div>
    </div>
    <div class="controlGroup controlGroupHidden" data-dojo-attach-point="distancebetweenRingsContainer">
      <label>${nls.distanceBetweenRingsLabel}</label>
      <div class="controlItem" data-dojo-attach-point="ringIntervalDiv">
        <input aria-label="${nls.distanceBetweenRingsLabel}" style="width: calc(100% - 108px);"
          data-dojo-type="dijit/form/NumberTextBox" required="true" value="1000"
          data-dojo-props="constraints:{places: 2}, invalidMessage: '${nls.ringsDecimalErrorMessage}'"
          data-dojo-attach-point="ringIntervalInput" />
        <select aria-label="${nls.distanceBetweenRingsLabel}" data-dojo-attach-point="ringIntervalUnitsDD"
          style="width: 100px;" class="controlSpace noResize" data-dojo-type="jimu/dijit/formSelect">
          <option value="feet">${nls.units.feet}</option>
          <option value="kilometers">${nls.units.kilometers}</option>
          <option value="miles">${nls.units.miles}</option>
          <option value="meters" selected="selected">${nls.units.meters}</option>
          <option value="nautical-miles">${nls.units.nauticalMiles}</option>
          <option value="yards">${nls.units.yards}</option>
        </select>
      </div>
    </div>
    <div class="controlGroup" data-dojo-attach-point="distanceUnitsContainer">
      <label>${nls.distanceUnitsLabel}</label>
      <div class="controlItem">
        <select aria-label="${nls.distanceUnitsLabel}" data-dojo-attach-point="distanceUnitsDD" style="width: 100%;"
          data-dojo-type="jimu/dijit/formSelect">
          <option value="feet">${nls.units.feet}</option>
          <option value="kilometers">${nls.units.kilometers}</option>
          <option value="miles">${nls.units.miles}</option>
          <option value="meters" selected="selected">${nls.units.meters}</option>
          <option value="nautical-miles">${nls.units.nauticalMiles}</option>
          <option value="yards">${nls.units.yards}</option>
        </select>
      </div>
    </div>
    <div class="controlGroup controlGroupHidden" data-dojo-attach-point="distanceTableContainer">
      <div class="add-with-icon" data-dojo-attach-point="btnAddDistance" tabindex="0" role="button"
        aria-label="${nls.distancesLabel}">
        <span class="jimu-icon jimu-icon-add" data-dojo-attach-point="btnAirframeIcon"></span>
        <span class="add-label">${nls.distancesLabel}</span>
      </div>
      <div data-dojo-attach-point="distanceTable" style="width: 100%;"></div>
    </div>
    <div class="controlGroup" data-dojo-attach-point="numRadialsContainer">
      <label>${nls.numberOfRadialsLabel}</label>
      <div class="controlItem" data-dojo-attach-point="numRadialsInputDiv">
        <input aria-label="${nls.numberOfRadialsLabel}" data-dojo-type="dijit/form/NumberTextBox" required="false"
          value="3" data-dojo-props="constraints:{min: 0, max: 360, places: 0}" style="width: 100%;"
          data-dojo-attach-point="numRadialsInput" />
      </div>
    </div>
    <div class="buttonContainer" data-dojo-attach-point="buttonContainer">
      <div class='jimu-btn jimu-state-disabled' data-dojo-attach-point='okButton' style="width: 49%;"
        data-dojo-attach-event="onclick: okButtonClicked" aria-label="${nls.common.ok}" role="button">${nls.common.ok}
      </div>
      <div class='jimu-btn' tabindex="0" role="button" aria-label="${nls.clearGraphicsLabel}" style="width: 49%;"
        data-dojo-attach-point='clearGraphicsButton'>${nls.clearGraphicsLabel}</div>
    </div>
  </div>
</div>