<div>
  <div class="form">
    <div class="distance">
      <label for="editline-distance-from-start">{{'bizedition.bydist.distance' | translate}}</label>
      <input
        type="number"
        id="editline-distance-from-start"
        class="form-control"
        ng-model="lineByDistance.distance"
      />
    </div>
    <div class="side">
      <label for="editline-side">{{'bizedition.bydist.line.side' | translate}}</label>
      <select
        type="text"
        id="editline-side"
        class="form-control"
        ng-model="lineByDistance.side"
        ng-blur="calculateAndDrawConnection()"
      >
        <option value="left">{{'bizedition.bydist.line.left' | translate}}</option>
        <option value="right">{{'bizedition.bydist.line.right' | translate}}</option>
      </select>
    </div>
    <div class="angle">
      <label for="editline-angle">{{'bizedition.bydist.line.angle' | translate}}</label>
      <input
        type="number"
        id="editline-angle"
        class="form-control"
        ng-model="lineByDistance.angle"
        ng-blur="calculateAndDrawConnection()"
      />
    </div>
    <div class="length">
      <label for="editline-length">{{'bizedition.bydist.line.length' | translate}}</label>
      <input
        type="number"
        id="editline-length"
        class="form-control"
        ng-model="lineByDistance.length"
        ng-blur="calculateAndDrawConnection()"
      />
    </div>
  </div>
  <div class="select-path">
    <label>{{'bizedition.bydist.modalText' | translate}}</label>
    <div>
      <span
        get-path-select
        map="map"
        netname="config.netname"
        minnodes="config.minnodes"
        maxnodes="config.maxnodes"
        nodesincr="config.nodesincr"
        res="networkPath.fullData"
        featuresres="networkPath.featureCollectionData"
        netfeaturesres="networkPath.nFeatureCollectionData"
        onfinish="onNetworkPathFinish()"
        title="{{'profil.selectStartNode' | translate}}"
        id="parcoursReseau"
        toolbarwidget="toolBarWidget"
        finishdistance="lineByDistance.distance"
        ignoregctypeinteraction="true"
        start-disabled="!isLineDistanceValid() || !isLineAngleValid() || !isLineLengthValid()"
        no-path-validation="true"
      >
      </span>
      <button
        type="button"
        class="btn btn-default"
        ng-class="{'btn-default-blink': lineByDistance.validators.hasPath}"
        ng-click="calculateAndDrawConnection()"
        ng-disabled="!isLineFormValid() || lineByDistance.validators.hasConnection"
      >
        <span>{{'bizedition.bydist.calc' | translate}}</span>
      </button>
    </div>
  </div>
  <div class="buttons">
    <button
      type="button"
      ng-click="cancelLineByDistance();closeThisDialog()"
      class="btn btn-default"
    >
      {{'common.cancel' | translate}}
    </button>
    <button
      type="button"
      ng-click="(popupToEdit ? editLineByDistance() : createLineByDistance());closeThisDialog()"
      class="btn btn-primary"
      ng-class="{'btn-primary-blink': lineByDistance.validators.hasConnection}"
      title="{{'bizedition.' + (popupToEdit ? 'bydist.editTooltip' : 'bycoords.line.createOnMap') | translate}}"
      ng-disabled="!lineByDistance.validators.hasConnection"
    >
      {{'bizedition.' + (popupToEdit ? 'bydist.line.edit' :'bycoords.line.create') | translate}}
    </button>
  </div>
</div>