<div class="tabPanel" data-dojo-attach-point="circleContainer">
  <div class="controls">
    <div class="controlGroup">
      <label>${nls.circleTitle}</label>
      <div class="controlItem">
        <select aria-label="${nls.circleTitle}" style="width:100%;" data-dojo-type="jimu/dijit/formSelect"
          data-dojo-attach-point="creationType" class="esriCTDropdownObj">
          <option value="Radius" selected="selected">${nls.radiusLabel}</option>
          <option value="Diameter">${nls.diameterLabel}</option>
        </select>
      </div>
    </div>
    <div class="controlGroup">
      <label data-dojo-attach-point="coordInputLabel">${nls.centerPointLabel}</label>
      <div class="controlItem">
        <div class="jimu-input coordInput" data-dojo-attach-point="startPointCoords"
          placeholder="${nls.startPointPlaceHolderLabel}" role="textbox">
        </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.drawCircleLabel}" class="drawPointBtn" data-dojo-attach-point="addPointBtn" tabindex="0"
              role="button" aria-label="${nls.drawCircleLabel}"></div>
          </div>
        </div>
      </div>
      <div class="controlGroup">
        <input aria-label="${nls.createCircleInteractivelyLabel}" class="interactive-checkbox esriCTCheckboxObj"
          type="checkbox" data-dojo-attach-point="interactiveCircle"
          aria-label="${nls.createCircleInteractivelyLabel}" />
        <label data-dojo-attach-point="interactiveLabel">${nls.createCircleInteractivelyLabel}</label>
      </div>
    </div>
    <div class="controlGroup">
      <label data-dojo-attach-point="radiusDiameterLabel">${nls.radiusLabel}</label>
      <div class="controlItem" data-dojo-attach-point="radiusInputDiv">
        <input aria-label="${nls.radiusLabel}" style="width: calc(100% - 108px);"
          data-dojo-type='dijit/form/NumberTextBox' required="true" value="1000" data-dojo-props="constraints: {min: 1}"
          data-dojo-attach-point="radiusInput">
        </input>
        <select aria-label="${nls.radiusLabel}" style="width: 100px" class="controlSpace noResize"
          data-dojo-type="jimu/dijit/formSelect" data-dojo-attach-point="lengthUnitDD">
          <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='distCalcControlDiv'>
      <div data-dojo-attach-point='distCalcControl' data-dojo-type="dijit/TitlePane" data-dojo-props="open: false">
        <div class="controlGroup">
          <label>${nls.timeLabel}
            <label>
              <div class="controlItem">
                <input aria-label="${nls.timeLabel}" style='width: calc(100% - 108px);' data-dojo-type='dijit/form/NumberTextBox'
                  required="true" value="1" data-dojo-props="constraints: {min: 1}" data-dojo-attach-point="timeInput">
                </input>
                <select aria-label="${nls.timeLabel}" class="controlSpace noResize"
                  data-dojo-type="jimu/dijit/formSelect" data-dojo-attach-point="timeUnitDD">
                  <option value="3600">${nls.hoursLabel}</option>
                  <option value="60" selected="selected">${nls.minutesLabel}</option>
                  <option value="1">${nls.secondsLabel}</option>
                </select>
              </div>
        </div>
        <div class="controlGroup">
          <label>${nls.rateLabel}
            <label>
              <div class="controlItem">
                <input aria-label="${nls.rateLabel}" style='width: calc(100% - 108px)' data-dojo-type='dijit/form/NumberTextBox'
                  required="true" value="1" data-dojo-props="constraints: {min: 1}"
                  data-dojo-attach-point="distanceInput">
                </input>
                <select aria-label="${nls.rateLabel}" class="controlSpace noResize"
                  data-dojo-type="jimu/dijit/formSelect" data-dojo-attach-point="distanceUnitDD">
                  <option value="0.3048;1">${nls.feetSecondsLabel}</option>
                  <option value="0.3048;3600">${nls.feetHourLabel}</option>
                  <option value="1000;1">${nls.kmSecondLabel}</option>
                  <option value="1000;3600">${nls.kmHourLabel}</option>
                  <option value="1;1" selected="selected">${nls.metersSecondLabel}</option>
                  <option value="1;3600">${nls.metersHourLabel}</option>
                  <option value="1609.344;1">${nls.milesSecondLabel}</option>
                  <option value="1609.344;3600">${nls.milesHourLabel}</option>
                  <option value="1852;1">${nls.nauticalMilesSecondLabel}</option>
                  <option value="1852;3600">${nls.nauticalMilesHourLabel}</option>
                </select>
              </div>
        </div>
      </div>
    </div>
    <div class="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>