<div class="representation_filiere" ng-class="{'slidable':isSlidable}">


    <div class="measureToolWrapper" ng-if="map">
        <div ng-show="!bloquerDessin()" toolbarmeasuredirective is-anc-rep-filiere="1" no-trash="1"
            preserve-features-on-close="1"></div>
    </div>



    <div id="rf_map" class="rf_map" gcmap gcmapmap="map" is-anc-or-bac="true">
    </div>
    <div id="popup" class="ol-popup">
        <a href="" id="popup-closer" class="ol-popup-closer">x</a>
        <div id="popup-content"> </div>
    </div>


    <div class="isinactive alert alert-danger" ng-if="filiere.properties.etat=='inactive' && !checkedInactive.x">
        <i class="fa fa-close" ng-click="checkedInactive.x=true"></i>
        Cette représentation de filière est associée à un contrõle cloturé.
    </div>


    <div class="elements">


        <div class="transformToVectoriel alert alert-info" ng-if="allowTransformEFToVectoriel">

            Cette représentation de filière est <b>schématique</b>.<br />
            <span class="doTransform" ng-click="transformEFToVectoriel()">Cliquer ici</span> pour la transformer en
            <b>représentation
                vectorielle</b>.
            </button>
        </div>



        <div class="elements_list">



            <table class="rpftable">
                <tr ng-repeat-start="category in get_keys(displayElements)  | orderBy:orderCategories"
                    class="category_title" ng-class="{'empty' : !displayElements[category].length}">
                    <td ng-init="categoryName = renderCategoryName(category)" class="categoryName" colspan="4">
                        {{ categoryName }}
                        <div class="categoryActions">
                            <div class="toggleCategory" ng-class="{'toggled': categoryVisibility[category].v }"
                                title="Afficher les éléments de cette catégorie" ng-click="toggleCategory(category)">
                                <i class="fa fa-eye"></i>
                            </div>

                            <div ng-if="!bloquerDessin() && category!='element_filiere' && category!='filiere' && category!='canalisations'"
                                title="Ajouter un élément" ng-click="addDisplayElementFromCategory(category)">
                                <i class="fa fa-plus"></i>
                            </div>
                            <div ng-if="!bloquerDessin() && category=='canalisations'"
                                data-template="js/XG/widgets/ancapp/main/views/popovers/popover.representation.canalisation.html"
                                data-placement="bottom-right" data-animation="am-flip-x" title="Ajouter un élément"
                                data-auto-close="1" bs-popover ng-disabled="!bloquerDessin()">
                                <i class="fa fa-plus"></i>
                            </div>
                            <div ng-if="!bloquerDessin() && category=='element_filiere'">
                                <i class="fa fa-plus" title="Ajouter un élément de filière"
                                    ng-click="addElemFilierePopup()"></i>
                            </div>
                            <div ng-if="!ancAppAndroid && category=='filiere'">
                                <i class="fa fa-times" title="Réinitialiser la filière"
                                    ng-click="resetAllFiliereElement()"></i>
                            </div>
                            <!-- <div ng-if="!ancAppAndroid && category=='filiere'">
                                <i class="fa fa-clone" title="Copie de filière" ng-click="openCopyFiliere()"></i>
                            </div> -->
                        </div>
                    </td>

                    <!-- TODO ADD CA AU TABLEAU AU DESSUS -->




                </tr>
                <tr ng-repeat-end ng-repeat="elem in displayElements[category] track by $index ">

                    <td ng-class="{'highlightedfeature':currentlyHighlightedFeature==elem.feature.id}"
                        ng-mouseover="addhighLightFeature(elem)" ng-mouseout="rmHighLightFeature()"
                        ng-click="goToFeature(elem)">

                        <div ng-attr-title="{{1?'Cliquer pour localiser':''}}" ng-if="elem.nom=='Canalisations'"
                            class="elemName">
                            <span> {{ renderNameCanalisations(elem) }} </span>
                        </div>
                        <div ng-attr-title="{{1?'Cliquer pour localiser':''}}" ng-if="category=='filiere'"
                            class="elemName">
                            <span> Emplacement</span>
                        </div>
                        <div ng-attr-title="{{1?'Cliquer pour localiser':''}}"
                            ng-if="elem.nom!='Canalisations' && category!='filiere'" class="elemName">
                            <span ng-bind="stripName(elem.nom)"></span>
                        </div>
                    </td>
                    <td>

                        <div ng-if="elem.nom=='Annotation' && elem.feature.geometry" title="Éditer">
                            <i class="fa fa-font" ng-click="openAnnotationDialog(elem)"></i>
                        </div>
                        <div ng-if="elem.nom=='Image'&&elem.feature.geometry" title="Éditer">
                            <i class="fa fa-file-image-o" ng-click="openImageDialog(elem)"></i>
                        </div>
                        <div ng-if="isCotation(elem) && elem.feature.geometry" title="Éditer">
                            <i class="fa fa-font" ng-click="openAnnotationDialog(elem)"></i>
                        </div>
                        <div ng-if="!isFiliereVectorielle && hasSeveralImages(elem) && elem.feature.geometry"
                            title="Choix du symbole">
                            <i class="fa fa-file-image-o" ng-click="openFiliereRepresentationImagesDialog(elem)"></i>
                        </div>
                    </td>
                    <td ng-class="{'active':currentlyEditedFeature==elem.feature.id}">
                        <i title="Modifier" class="fa fa-edit" ng-if="category!='filiere' && elem.feature.geometry"
                            ng-click="editFeature(elem)"></i>
                        <i title="Modifier l'emplacement de la filière" class="fa fa-edit"
                            ng-if="category=='filiere' && elem.feature.geometry" ng-click="editFeature(elem)"></i>
                        <i title="Dessiner" class="fa fa-pencil" ng-if="!elem.feature.geometry"
                            ng-click="newFeature(elem)"></i>
                    </td>
                    <!-- <td title="Localiser {{elem.nom}}">
                        <i class="fa fa-location-arrow" ng-if="elem.feature.geometry" ng-click="goToFeature(elem)"></i>
                    </td> -->
                    <td>
                        <i ng-if="elem.nom!='Filière'" title="Supprimer {{elem.nom}}" class="fa fa-times"
                            ng-click="removeFeatureGeometry(category,elem,$index)"></i>
                        <i ng-if="elem.nom=='Filière' && elem.feature.geometry" class="fa fa-times disabled"></i>
                    </td>
                </tr>

                <tr class="category_title">
                    <td colspan="4">
                        Cotations
                        <div class="categoryActions">
                            <div class="toggleCategory" ng-class="{'toggled': categoryVisibility.cotations.v }"
                                title="Afficher les éléments de cette catégorie" ng-click="toggleCategory('cotations')">
                                <i class="fa fa-eye"></i>
                            </div>
                            <div class="cotationDeleter" ng-class="{'disabled': !cotationsV2.length}"
                                ng-click="deleteCotations()">
                                <i class="fa fa-trash"></i>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr ng-repeat="cotation in cotationsV2 track by $index">
                    <td ng-class="{'highlightedfeature':currentlyHighlightedFeature==cotation.properties.uid && !cotationValueDisplay[$index]}"
                        ng-mouseover="highLightCotation(cotation)" ng-mouseout="rmHighLightFeature()">

                        <div class="elemName">
                            <!-- <span class="label label-default dimmed">{{ $index+1 }}</span> -->
                            <span ng-show="!cotationValueDisplay[$index]"
                                ng-bind-html="cotation.properties.distance"></span>
                            <input class="cotationValue" ng-show="cotationValueDisplay[$index]" type="text"
                                ng-model="cotation.properties.distance" />
                        </div>

                    </td>

                    <td></td>
                    <td>
                        <i class="fa fa-edit" title="Modifier l'étiquette"
                            ng-click="editCotationValue($index, cotation)"></i>
                    </td>
                    <td>
                        <i class="fa fa-times" title="Supprimer cette cotation"
                            ng-click="removeCotationById(cotation)"></i>
                    </td>

                    <!-- <i class="fa fa-eye visibleTournee" ng-if="button.active==1"></i> {{button.name}} -->
                </tr>
                <tr class="category_title">
                    <td colspan="4">
                        Fonds de plan
                    </td>
                </tr>

                <tr ng-repeat="button in baselayers track by $index">
                    <td>
                        {{ button.name }}
                    </td>

                    <td></td>
                    <td></td>
                    <td>
                        <i class="fa"
                            ng-class="{ 'factive': button.active==1, 'fa-eye' : button.active==1 , 'fa-eye-slash' : button.active!=1 }"
                            ng-click="toggleBaseMap(button)"></i>
                    </td>

                    <!-- <i class="fa fa-eye visibleTournee" ng-if="button.active==1"></i> {{button.name}} -->
                </tr>

            </table>



        </div>

        <!-- <div class="others_actions"> -->



        <!-- <div class="btn btn-xs btn-default add add_anotation cursorHelp" ng-click="addAnnotation()" ng-disabled="!bloquerDessin()"
                title="Ajouter une annotation">
                <i class="fa fa-plus"></i>Annotation
            </div>
            <div class="btn btn-xs btn-default add add_image cursorHelp" ng-click="addImage()" ng-disabled="!bloquerDessin()"
                title="Ajouter un accessoire">
                <i class="fa fa-plus"></i>Accessoire
            </div> -->


        <!--  <div class="btn btn-xs selections" ng-hide="AppAndroid"
        ng-click="selectCanalisattions()"
        ng-disabled="!bloquerDessin()"
        ng-class="{'btn-default':!select_features,'btn-primary':select_features}">
        Sélectionner
    </div>
    
    <div class="btn btn-xs btn-danger remove_selections" ng-hide="AppAndroid"
    ng-click="removeFeaturesSelected()" ng-disabled="!featuresSelectionnees.length>0||!bloquerDessin()">
    Supprimer sélection
    </div>-->

        <!-- <div ng-repeat="button in baselayers track by $index" class="btn btn-xs btn-default cursorHelp visibleTournee"
                ng-init="initBaseMap()" ng-click="toggleBaseMap(button)" title="Fond de plan {{button.name}}">
                <i class="fa fa-eye visibleTournee" ng-if="button.active==1"></i> {{button.name}}
            </div>
            <div ng-click="toggleFiliere()" class="btn btn-xs btn-default cursorHelp" title="Afficher / Cacher la filière">
                <i class="fa fa-eye" ng-if="dessinFiliereActive==1"></i> Filière
            </div> -->


        <!--  </div> -->


        <!-- <div class="col-xs-12 text-center content" ng-show="!hasGeomFiliere">
            <div class="alert alert-danger">
                Veuillez positionner la filière
            </div>
        </div> -->
        <div class="btn btn-xs btn-default textStyle" ng-click="toggleText()" ng-disabled="!bloquerDessin()">
            <i class="fa fa-eye" ng-show="displayTextStyle"></i>
            <i class="fa fa-eye-slash" ng-show="!displayTextStyle"></i> &nbsp; Légende
        </div>
        <div class="btn btn-xs btn-default textStyle" ng-click="toggleGraticule()">
            <i class="fa fa-eye" ng-show="displayGraticule"></i>
            <i class="fa fa-eye-slash" ng-show="!displayGraticule"></i> Quadrillage
        </div>
    </div>



    <!--   <div class="toolbar" ng-class="{'shown' : currentlyEditedFeature!=-1&&currentlyEditedFeature != 'tuyaux_representation'}">-->

    <div class="toolbar" ng-class="{'shown' : 0 && renderTypeFeature(currentlyEditedFeature)}">

        <div ng-if="!isFiliereVectorielle">
            <div class="sliderFeature">
                <i class="fa fa-rotate-left"></i>
                <div class="value"> {{-featureParams.rotate}}</div>
                <div range-slider max="0" min="-360" model-max="featureParams.rotate" pin-handle="min"
                    orientation="vertical">

                </div>
            </div>
            <div class="sliderFeature">
                <i class="fa fa-arrows-alt"></i>
                <div class="value"> {{-featureParams.scale}}</div>
                <div range-slider min="-10" max="-1" model-max="featureParams.scale" pin-handle="min"
                    orientation="vertical"></div>
            </div>
        </div>


        <div ng-show="displayToolbarVectorielle()" class="editElementFiliereV2">


            <div class="actions">

                <!-- advanced -->
                <div class="btn btn-sm" ng-class="{'btn-primary' : editEfv2Cfg.mode=='advanced' }"
                    ng-click="editEfv2('advanced')" title="Déplacement, Rotation, Étirement">
                    <i class="fa fa-arrows"></i>
                </div>

                <!-- pickRepresentation if more than one -->
                <div class="btn btn-sm" ng-class="{'btn-primary' : editEfv2Cfg.mode=='pickRepresentation' }"
                    ng-click="editEfv2('pickRepresentation')" ng-if="isMultiRepresentations()"
                    title="Choisir une représentation">
                    <i class="fa fa-file-image-o"></i>
                </div>

                <!-- modify -->
                <div class="btn btn-sm" ng-class="{'btn-primary' : editEfv2Cfg.mode=='modify' }"
                    ng-click="editEfv2('modify')" title="Édition du dessin">
                    <i class="fa fa-pencil-square-o"></i>
                </div>

                <!-- reset  -->
                <div class="btn btn-sm resetGeometry" ng-click="editEfv2('reset')"
                    title="Réinitialiser la géométrie par défaut">
                    <i class="fa fa-retweet"></i>
                </div>

                <!-- reset  -->
                <span class="separator"> </span>
                <span class="mini"> Longueur <span>(avant rotation)</span></span>
                <span> <input type="number" min="0" ng-model="curreEfDimension.largeur" /> </span>
                <span class="preserveRatio" title="Conserver les proportions"
                    ng-click="curreEfDimension.preserveRatio=!curreEfDimension.preserveRatio">
                    <i class="fa fa-link" ng-class="{'active' : curreEfDimension.preserveRatio }"></i>
                </span>
                <span class="mini"> Largeur <span>(avant rotation)</span></span>
                <span> <input type="number" min="0" ng-model="curreEfDimension.hauteur" /> </span>

                <div class="btn btn-xs btn-default updateEfDimensions" ng-click="updateEfDimensions()"
                    title="Appliquer les valeurs">
                    <i class="fa fa-refresh"></i> Appliquer
                </div>

            </div>

            <div class="extra repVectoriellePicker" ng-if="repVectoriellePicker.length">
                <div class="sub list">
                    <div class="repVectoriellePick" ng-repeat="x in repVectoriellePicker"
                        ng-class="{'selected' : currentlyPickedPreview==x.identifiant}"
                        ng-mouseover="selectRepForPreview(x)" ng-click="repVectoriellePick(pickedForPreview)">
                        {{ x.label }}
                    </div>
                </div>
                <div class="sub preview">
                    <anc-edit-dessin-filiere modele="pickedForPreview.modele" editable="false" no-controls="true"
                        no-basemap="true" zoom-on-feature="true"></anc-edit-dessin-filiere>

                </div>
            </div>


        </div>



    </div>

  <div class="floatingWidgets">
    <features-config
        baselayers="baselayers"
        config="featuresConfig"
        from-anc="true"
        map="currentMap"
        ng-if="featuresConfig && map"
        ng-show="!AppAndroid"
        tooltip="tooltipTitle"
    >
    </features-config>
    <div
        class="editFiliereWidgets edittoolwidget"
        ng-init="toggledEditList=false"
        ng-class="{'expanded': toggledEditList, 'folded': !toggledEditList}"
    >
      <div class="header">
        <div
            class="btn btn-default btn-xxs pull-right visibleTournee"
            ng-click="toggledEditList=!toggledEditList"
            ng-disabled="AppAndroid"
        >
          <i class="fa fa-expand visibleTournee"></i>
        </div>
        Édition des objets
      </div>
      <div class="body" ng-show="toggledEditList">
        <div bizeditwidget></div>
      </div>
    </div>
  </div>
    <!-- Contrôles en bas-droit de la carte des filières -->
    <div class="map-bottom-right">
        <div
          gcscaleline
          gcscalelinemap="map"
        ></div>
        <gcscalevalue scale-value-list="{{scaleValueList}}" set-input="true"></gcscalevalue>
        <gcmouseposition
          gcmousepositionmap="map"
          gcmousepositionoptions=""
        ></gcmouseposition>
    </div>

    <div ng-class="{ 'savebtnmobile' : AppAndroid , 'savebtn' : !AppAndroid } ">
        <div class="btn btn-sm" ng-class="!bloquerDessin() ? 'btn-success' : 'btn-danger'"
            ng-click="saveElementsFeatures()" ng-disabled="bloquerDessin()">
            <i class="fa fa-save"></i>
            <span ng-if="!bloquerDessin()">Enregistrer</span>
            <span ng-if="bloquerDessin()">Placer la filière pour enregistrer</span>
        </div>
    </div>
    <div ng-if="!bloquerDessin()" class="btn btn-sm btn-default savebtn" ng-click="saveRepAsImage()">
        <i class="fa fa-camera"></i>
        <span>Générer un plan</span>
    </div>


</div>