<div ng-if="!$root.is_mobile" id="layertree-button">
    <div class="list-group-item active pointer layertree-button-content"
         title="Affiche les jeux de données"
         collapse="{{ctrl.layerstree_collapsed === true ? 'out' : 'in'}}"
         data-target="#layertree"
         onclick="oVmap.getMapManager().collapseElement(this)">

        <span class="icon-database list-group-icon"></span>
        <span>Jeux de données</span>
        <span class="list-group-icon2" ng-class="{'icon-keyboard_arrow_down':ctrl.layerstree_collapsed !== true, 'icon-keyboard_arrow_right':ctrl.layerstree_collapsed === true}"></span>
    </div>
</div>

<div id="layertree" class="layers-tool" collapse="{{ctrl.layerstree_collapsed === true ? 'out' : 'in'}}">

    <ul class="nav nav-tabs layerstree-nav left">
        <li class="active"><a data-toggle="tab" href="#map1">Carte 1</a></li>
        <li><a data-toggle="tab" href="#map1">Carte 2</a></li>
    </ul>
    <div class="indicators">
        <span class="text-info icon-eye" style="font-size: 18px;line-height: 0" title="Définit si la couche est visible"></span>
    </div>

    <ul class="tree">
        <div ng-repeat="node in tree.children| orderBy : 'name'" ng-if="node.view === undefined">

            <!-- Service -->
            <div class="layerstree-phather">
                <div class="tree-father-collapse-btn service-name left" data-toggle="collapse" data-target="#tree_element_{{$id}}" onclick="setTimeout(function () {
                                oVmap.resizeLayerTools(true)
                            }, 500)" title="{{node.name}}">
                    {{node.name}}
                </div>
                <div class="checkbox checkbox-info inline-checkbox right"
                     ng-class="{'checkbox_indeterminate': node.visible === null}">
                    <input id="service_{{$id}}_visible"
                           ng-init="node.visible = ctrl.isGroupVisible(node)"
                           ng-model="node.visible"
                           ng-model-options="{getterSetter: true}"
                           ng-click="ctrl.setGroupVisible(node)"
                           type="checkbox"
                           style="cursor:pointer; position: absolute"
                           title="Definit si le groupe est visible">
                    <label for="service_{{$id}}_visible"
                           style="cursor:pointer"
                           title="Definit si le groupe est visible"></label>
                </div>
            </div>

            <!-- Calque -->
            <ul id="tree_element_{{$id}}" class="collapse layers-tree-ul tree-element" ng-class="{'in': ctrl.layers_collapsed !== true}">
                <div ng-repeat="layer in node.children">
                    <li>
                        <ul class="list-group-item layertree-item auto-height">

                            <!-- Nom du calque -->
                            <div class="layer-name layer-name-tree" title="{{layer.name}}">{{layer.name}}</div>
                            <div class="layer-checkboxes">
                                <button type="button"
                                        class="btn btn-xs margin-sides-10 hidden"
                                        ng-click="layer.olLayer.getSource().refreshWithTimestamp()">
                                    <span class="glyphicon glyphicon-refresh"></span>
                                </button>
                                <div type="button" class="btn btn-xs layer-menu-button" ng-click="ctrl.toggleLayerMenu(layer, $event)">
                                    <span ng-class="{'icon-filter': layer.olLayer.get('is_filtered'), 'icon-format_list_bulleted': !layer.olLayer.get('is_filtered')}"></span>
                                </div>
                                <!-- Checkbox visible -->
                                <div class="checkbox checkbox-info inline-checkbox" style="z-index: 10;">
                                    <input id="{{layer.$$hashKey}}_visible_order_checkbox"
                                           type="checkbox"
                                           style="cursor:pointer; position: absolute"
                                           title="Definit si le calque est visible"
                                           ng-checked="layer.olLayer.values.visible === true"
                                           ng-click="ctrl.setVisible(layer.olLayer, !layer.olLayer.values.visible);node.visible = ctrl.isGroupVisible(node)">
                                    <label for="{{layer.$$hashKey}}_visible_order_checkbox" style="cursor:pointer" title="Definit si la couche est visible"></label>
                                </div>
                                <!-- Checkbox interrogation GetFeatureInfo -->
                                <div class="checkbox checkbox-success inline-checkbox"
                                        ng-if="layer.olLayer.values.is_queryable_getfeatureinfo === true && ctrl.properties.selection.enable_getfeatureinfo === true"
                                        ng-class="{'checkbox_indeterminate': ctrl.isLayerWMSQueryable(layer.olLayer) === null}">
                                    <input id="{{layer.$$hashKey}}_wms_queryable_checkbox"
                                           type="checkbox"
                                           style="cursor:pointer; position: absolute"
                                           title="Definit si le calque est interrogeable par requête WMS"
                                           ng-disabled="layer.olLayer.values.visible === false"
                                           ng-checked="ctrl.isLayerWMSQueryable(layer.olLayer)"
                                           ng-click="ctrl.toggleLayerWMSQueryable(layer.olLayer)">
                                    <label for="{{layer.$$hashKey}}_wms_queryable_checkbox" style="cursor:pointer" title="Definit si le calque est interrogeable par requête WMS"></label>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <div class="dropdown-menu layer-menu" ng-class="{'block': layer.displayedMenu === true}">
                        <div class="layer-menu-list">
                            <li ng-if="layer.olLayer.get('is_filtered')" ng-click="ctrl.displayFilterLayerModal(layer.olLayer)">
                                <a href="#">
                                    <span class="icon-filter"></span>
                                    Filtre
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <span class="icon-star-half"></span>
                                            Transparence
                                        </div>
                                        <div class="col-xs-6">
                                            <div class="layer-menu-list-slider">
                                                <input data-app-layer-opacity-slider="" id="slider_layer_form_{{layer.$$hashKey}}" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li ng-if="layer.olLayer.get('type') === 'imagewms' || layer.olLayer.get('type') === 'tilewms'"
                                ng-repeat="sublayer in layer.olLayer.get('sublayers')">
                                <div class="sublayer-checkboxes">
                                    <!-- Checkbox interrogation GetFeatureInfo -->
                                    <div class="checkbox checkbox-success sublayer-checkbox inline-checkbox" ng-if="layer.olLayer.values.is_queryable_getfeatureinfo === true && ctrl.properties.selection.enable_getfeatureinfo === true">
                                        <input id="{{layer.$$hashKey}}_sublayer_{{sublayer}}_wms_queryable_checkbox"
                                        type="checkbox"
                                        style="cursor:pointer; position: absolute"
                                        title="Definit si la couche est est interrogeable par requête WMS"
                                        ng-checked="ctrl.isSublayerWMSQueryable(layer.olLayer, sublayer)"
                                        ng-disabled="layer.olLayer.values.visible !== true"
                                        ng-click="ctrl.toggleSublayerWMSQueryable(layer.olLayer, sublayer)">
                                        <label for="{{layer.$$hashKey}}_sublayer_{{sublayer}}_wms_queryable_checkbox" style="cursor:pointer" title="Definit si la couche est interrogeable par requête WMS"></label>
                                    </div>
                                    <!-- Checkbox visible -->
                                    <div class="checkbox checkbox-info sublayer-checkbox inline-checkbox">
                                        <input id="{{layer.$$hashKey}}_sublayer_{{sublayer}}_visible_checkbox"
                                               type="checkbox"
                                               style="cursor:pointer; position: absolute"
                                               title="Definit si la couche est visible"
                                               ng-checked="ctrl.isSublayerActive(layer.olLayer, sublayer)"
                                               ng-disabled="layer.olLayer.values.visible !== true"
                                               ng-click="ctrl.toggleSubLayer(layer.olLayer, sublayer, '#' + layer.$$hashKey + '_sublayer_' + sublayer + '_visible_checkbox')">
                                        <label for="{{layer.$$hashKey}}_sublayer_{{sublayer}}_visible_checkbox" style="cursor:pointer" title="Definit si la couche est visible">{{sublayer}}</label>
                                    </div>
                                </div>
                            </li>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
    </ul>
</div>

<!--Modale pour le filtrage-->
<div id="layerstree-filter-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="max-height: 100%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Filtrer la couche: {{ctrl.olFilteredLayer.get('name')}}</h4>
            </div>
            <div class="modal-body modal-body-big-with-footer-3">
                <div id="layerstree_filter_formreader"
                     app-form-reader
                     app-properties="ctrl.properties"
                     app-token="ctrl.token"></div>
            </div>
            <div class="modal-footer modal-footer-sm">
                <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" onclick="oVmap.simuleClick('layerstree_filter_formreader_submit_btn')">Appliquer le filtre</button>
            </div>
        </div>
    </div>
</div>

<!--
    Bouton invisible qui sert à charger les cartes:
    ceci a été fait car ce bouton a besoin de ctrl.reloadTree
    qui se trouve uniquement ici. Pour appeler la fonction:
-->
<button id="btn-reload-map" style="display: none" ng-click="ctrl.reloadTree()">Reload map</button>