<div class="tabPanel" data-dojo-attach-point="lineContainer">
  <div class="controls">
    <div class="controlGroup">
      <label>${nls.fromLabel}</label>
      <div class="controlItem">
        <select data-dojo-attach-point="lineTypeDD" style="width:100%" data-dojo-type="jimu/dijit/formSelect"
          aria-label="${nls.fromLabel}" class="esriCTDropdownObj">
          <option value="DistAndBearing">${nls.distanceBearingLabel}</option>
          <option selected="selected" value="Points">${nls.pointsLabel}</option>
        </select>
      </div>
    </div>
    <div class="controlGroup" data-dojo-attach-point="startDiv">
      <label data-dojo-attach-point="lineStartPointLabel">${nls.startPointLabel}</label>
      <div class="controlItem">
        <div class="jimu-input coordInput" data-dojo-attach-point="startPointCoordsLine">
        </div>
        <div class="controlItem paddedLeft" data-dojo-attach-point="addPointBtnStartDiv">
          <div class='add-with-icon'>
            <span title="${nls.formatInputLabel}" class="jimu-icon settingBtn safariOnly"
              data-dojo-attach-point="coordinateFormatButtonStart" tabindex="0" aria-label="${nls.formatInputLabel}"
              role="button"></span>
          </div>
          <div class='add-with-icon'>
            <div title="${nls.addPointLabel}" class="drawPointBtn" data-dojo-attach-point="addPointBtnStart"
              tabindex="0" aria-label="${nls.addPointLabel}" role="button"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="controlGroup">
      <input aria-label="${nls.createLineInteractively}" class="interactive-checkbox esriCTCheckboxObj" type="checkbox"
        data-dojo-attach-point="interactiveLine" />
      <label data-dojo-attach-point="interactiveLabel">${nls.createLineInteractively}</label>
    </div>
    <div class="controlGroup endPt">
      <label data-dojo-attach-point="lineEndPointLabel">${nls.endPointLabel}</label>
      <div class="controlItem">
        <div class="jimu-input coordInput" data-dojo-attach-point="endPointCoordsLine">
        </div>
        <div class="controlItem paddedLeft" data-dojo-attach-point="addPointBtnEndDiv">
          <div class='add-with-icon'>
            <span title="${nls.formatInputLabel}" class="jimu-icon settingBtn safariOnly"
              data-dojo-attach-point="coordinateFormatButtonEnd" tabindex="0" aria-label="${nls.formatInputLabel}"
              role="button"></span>
          </div>
          <div class='add-with-icon'>
            <div title="${nls.addPointLabel}" class="drawPointBtn" data-dojo-attach-point="addPointBtnEnd" tabindex="0"
              aria-label="${nls.addPointLabel}" role="button"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="controlGroup">
      <label>${nls.lengthLabel}</label>
      <div class="controlItem" data-dojo-attach-point="lengthInputDiv">
        <input aria-label="${nls.lengthLabel}" style="width: calc(100% - 108px);"
          data-dojo-type='dijit/form/NumberTextBox' required="true" value="1000"
          data-dojo-props="constraints: {min: 1, max: 40030000}" data-dojo-attach-point="lengthInput"
          data-dojo-attach-event="keyup: checkValidInputs">
        </input>
        <select style="width: 100px" class="controlSpace noResize" data-dojo-type="jimu/dijit/formSelect"
          data-dojo-attach-point="lengthUnitDD" aria-label="${nls.lengthLabel}">
          <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">
      <label>${nls.angleLabel}</label>
      <div class="controlItem" data-dojo-attach-point="angleInputDiv">
        <input aria-label="${nls.angleLabel}" data-dojo-type="dijit/form/NumberTextBox"
          style="width: calc(100% - 108px);" required="true" value="0" data-dojo-props="constraints: {min: 0, max: 360}"
          data-dojo-attach-point="angleInput" data-dojo-attach-event="onChange: checkValidInputs">
        </input>
        <select style="width: 100px" class="controlSpace noResize" data-dojo-type="jimu/dijit/formSelect"
          data-dojo-attach-point="angleUnitDD" tabindex="0" aria-label="${nls.angleLabel}">
          <option value="degrees">${nls.degreesLabel}</option>
          <option value="mils">${nls.milsLabel}</option>
        </select>
      </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" tabindex="-1" 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' data-dojo-attach-event="onclick: clearGraphics">
        ${nls.clearGraphicsLabel}</div>
    </div>
  </div>
</div>