<div class="row clearfix">
  <div id="pickMode" class="col-xs-1">
   
  </div>
  <div id="startEnd" class="col-xs-11 clearfix">
    <input
      id="fromAddress"
      type="text"
      class="form-control"
      ng-model="addresses.from"
      bs-options="address as address.formatted_address for address in getInformationsFromAddress($viewValue)"
      placeholder="{{'directions.placeholder-start' | translate}}"
      bs-typeahead
    />

    <input
      id="toAddress"
      type="text"
      class="form-control"
      ng-model="addresses.to"
      bs-options="address as address.formatted_address for address in getInformationsFromAddress($viewValue)"
      placeholder="{{'directions.placeholder-end' | translate}}"
      bs-typeahead
    />
  </div>
  <div
  id="directionControlsDetail"
  ng-class="{'active' : visibleDirections == true, 'hidden' : !addresses.directions.hasOwnProperty('summary') }"
>
  <div class="leg">
    <div class="main clearfix" ng-click="goTohighlightPath(-1)">
      <div class="summary">{{ addresses.directions.summary }}</div>
      <div class="distance">{{ addresses.directions.legs.distance.text }}</div>
      <div class="duration">{{ addresses.directions.legs.duration.text }}</div>
    </div>
    <div class="steps">
      <ul>
        <li
          class="step"
          ng-repeat="step in  addresses.directions.legs.steps"
          ng-mouseover="highlightPath(step)"
          ng-click="goTohighlightPath($index)"
          ng-class="{'active' : currentHL == $index}"
        >
          <div class="clearfix">
            <div class="travel_mode {{step.travel_mode}}"></div>
            <div class="distance">{{step.distance.text}}</div>
            <div class="duration">{{step.duration.text}}</div>
          </div>

          <div
            class="instructions"
            ng-bind-html="trustInstructions(step.instructions)"
          ></div>
        </li>
      </ul>
    </div>
    <div class="hidelegs" ng-click="toggleDirections()">
      <i class="fa fa-arrow-up hideup"></i>
      <i class="fa fa-arrow-down hidedown"></i>
    </div>
  </div>
</div>

    <div class='optionskeys' ng-show="isActiveChooseKeyPanel">
      <div class='openrouteoptions'>
          <label>Clé Openroute</label>
          <input
              id="openroutekey"
              name="openroutekey"
              type="checkbox"
              ng-show="chooseOpenroute"
              title="openroute"
              ng-click="checkedopenroute()"
              ng-disabled="disableIfNoKeyOpenroute"
          />
      </div>
      <div class='googleoption'>
          <label>Clé Google</label>
          <input
              id="googlekey"
              name="googlekey"
              type="checkbox"
              ng-show="chooseGoogle"
              title="Google"
              ng-click="checkedgoogle()"
              ng-disabled="disableIfNoKeyGoogle"
          />
      </div>
      <div class='ignoption'>
          <label>Clé IGN</label>
          <input
              id="ignkey"
              name="ignkey"
              type="checkbox"
              ng-show="chooseIgn"
              title="ign"
              ng-click="checkedoign()"
              ng-disabled="disableIfNoKeyIgn"
          />
      </div>
      <div>
          <button
              type="button"
              class="btn btn-default"
              ng-click="resetPoints()"
          >
          Réinitialiser
          </button>
      </div>
    </div>

    <div class="container-fluid row" ng-show="ignForm" >
      
      <form id="route-form">
        <p><strong>Paramètres de l'itinéraire</strong></p>
    
        <p> Ressource : 
        
        <select class="btn dropdown-toggle btn-light" id="userResource">
          <option title="Calcul opéré par le moteur OSRM" value="bdtopo-osrm">Réseau routier BDTOPO optimisé</option>
          <option title="Calcul opéré par le moteur PGRouting" value="bdtopo-pgr">Réseau routier BDTOPO non optimisé</option>
        </select>
        </p>
        
        <p> Mode de déplacement : 
        
        <select class="selectpicker" id="userProfile">
          <option value="car">Voiture</option>
          <option value="pedestrian">Piéton</option>
        </select></p>
    
        <p> Option de calcul : 
        
        <select class="selectpicker" id="userOptimization">
          <option value="fastest">Plus rapide</option>
          <option value="shortest">Plus court</option>
        </select></p>

        <p>Contraintes : exclure les routes comprenant des : 
        <input class="constrChkBx" type="checkbox" id="banned-highway" name="Autoroutes">
        <label for="Autoroutes">Péages</label>
        <input class="constrChkBx" type="checkbox" id="banned-tunnel" name="Tunnels">
        <label for="Tunnels">Tunnels</label>
        <input class="constrChkBx" type="checkbox" id="banned-bridge" name="Ponts">
        <label for="Ponts">Ponts</label>
        </p>
          
        <p>
        <input class="constrChkBx" type="checkbox" id="pref-imp" name="pref-imp" disabled> <select class="selectpicker" id="pref-ou-avoid-imp">
          <option value="prefer">Privilégier</option>
          <option value="avoid">Éviter</option>
        </select> les routes d'importance <select class="selectpicker" id="operator-imp">
          <option value=">=">supérieure ou égale</option>
          <option value="<=">inférieure ou égale</option>
          <option value="=">égale</option>
        </select> à <select class="selectpicker" id="importance">
          <option value="1">1 (européen)</option>
          <option value="2">2 (national)</option>
          <option value="3">3 (départemental)</option>
          <option value="4">4 (communal rapide)</option>
          <option value="5">5 (communal)</option>
        </select>
        </p>
        <p>
        <input class="constrChkBx" type="checkbox" id="pref-classt" name="pref-classt" disabled> <select class="selectpicker" id="pref-ou-avoid-classt">
          <option value="prefer">Privilégier</option>
          <option value="avoid">Éviter</option>
        </select> les routes de type <select class="selectpicker" id="classement">
    
          <option value="autoroute">Autoroute</option>
          <option value="nationale">Nationale</option>
          <option value="departementale">Départementale</option>
          <option value="route_intercommunale">Route intercommunale</option>
        
          <option value="route_intercommunale">Route intercommunale</option>
        
          <option value="chemin_rural">Chemin rural</option>
      
      
        </select>
        </p>
        <p>
        <input class="constrChkBx" type="checkbox" id="pref-iti-vert" name="pref-iti-vert" disabled> Privilégier les itinéraires verts
        </p>
      
      </form>
    
