<div class="col-xs-12 center">
    <label class="required">
      <translate>hpo.model.prevision.modelchoice</translate>
    </label>
    <select
      class="form-control"
      ng-model="selectedPrevision"
      ng-class="{ 'form-control-info' : disabledAll }"
      aria-describedby="basic-addon1"
      ng-change="newLeakSelected()"
      ng-options="opt.properties as opt.properties.NOM_PREVISION for opt in previsionList | orderBy:'properties.NOM_PREVISION'"
    >
      <option value="" disabled selected hidden translate>model.featuretypes.actions.choisir</option>
    </select>
</div>
<div class="col-md-12">
  <div class="featuretypePreview">
    <div id="leakSearchMap"></div>
  </div>
  <table class="table table-bordered" ng-if="leakSearchMap">
    <thead>
      <tr>
        <th><translate>hpo.searchLeak.zoomScales</translate></th>
        <th><translate>hpo.searchLeak.prioritisationAreas</translate></th>
      </tr>
    </thead>
    <tbody ng-repeat="zoomLevel in zoomLevels track by $index">
     <tr>
      <td rowspan="{{rowSpanLength(zoomLevel)}}"
          style="vertical-align: middle;">
        <div ng-if="zoomLevel!=='cana'">
          <div class="center col-xs-12">
            <translate>{{'hpo.searchLeak.'+zoomLevel}}</translate>
          </div>
          <div class="center col-xs-12">
            <small><translate>min</translate></small>
            <input type="number" min="0" max="{{zoomLevelsminMax[zoomLevel]['max']}}" ng-model="zoomLevelsminMax[zoomLevel]['min']" ng-change="changeZoom()" />
            <small><translate>max</translate></small>
            <input type="number" min="{{zoomLevelsminMax[zoomLevel]['min']}}" max="28" ng-model="zoomLevelsminMax[zoomLevel]['max']" ng-change="changeZoom()" />
          </div>
        </div>
      </td>
      <td ng-if="allLayers[zoomLevel]['bleu']">
        <div class="col-md-12 cursorPointer" ng-click="addRemoveLayer(zoomLevel,'bleu')">
          <div class="col-md-3 typeInfoIcon" ng-class="{'LINE':zoomLevel==='cana','POLYGON':zoomLevel!=='cana',
              'bleuBackground':visibility[zoomLevel]['bleu'],'greyBackground':!visibility[zoomLevel]['bleu']}"><i></i></div>
          <div class="col-md-9" ng-if="zoomLevel!=='cana'"><translate>hpo.searchLeak.veryLowRisk</translate></div>
          <div class="col-md-9" ng-if="zoomLevel==='cana'"><translate>hpo.searchLeak.cana</translate></div>
        </div>
      </td>
     </tr>
     <tr ng-if="allLayers[zoomLevel]['yellow']">
      <td>
        <div class="col-md-12 cursorPointer" ng-click="addRemoveLayer(zoomLevel,'yellow')">
          <div class="col-md-3 typeInfoIcon POLYGON" ng-class="{'yellowBackground':visibility[zoomLevel]['yellow'],'greyBackground':!visibility[zoomLevel]['yellow']}"><i></i></div>
          <div class="col-md-9"><translate>hpo.searchLeak.lowRisk</translate></div>
        </div>
      </td>
     </tr>
     <tr ng-if="allLayers[zoomLevel]['orange']">
      <td>
        <div class="col-md-12 cursorPointer" ng-click="addRemoveLayer(zoomLevel,'orange')">
          <div class="col-md-3 typeInfoIcon POLYGON" ng-class="{'orangeBackground':visibility[zoomLevel]['orange'],'greyBackground':!visibility[zoomLevel]['orange']}"><i></i></div>
          <div class="col-md-9"><translate>hpo.searchLeak.mediumRisk</translate></div>
        </div>
      </td>
     </tr>
     <tr ng-if="allLayers[zoomLevel]['red']">
      <td>
        <div class="col-md-12 cursorPointer" ng-click="addRemoveLayer(zoomLevel,'red')">
          <div class="col-md-3 typeInfoIcon POLYGON" ng-class="{'redBackground':visibility[zoomLevel]['red'],'greyBackground':!visibility[zoomLevel]['red']}"><i></i></div>
          <div class="col-md-9"><translate>hpo.searchLeak.highRisk</translate></div>
        </div> 
      </td>
     </tr>    
    </tbody>  
  </table>
</div>