{% extends "assets/base_assets_index.html" %}
{% load static i18n %}

{% block locations_filter_form %}
    <form method="get" id="filter-form" class="row g-3 mb-4" style="width: 30vw;">
        <div class="col-12">
            <label class="form-label">{% translate "Type de localisation" %}</label>
            <div class="d-flex gap-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="location_type" id="location_type_all" value=""
                        {% if not selected_location_type %}checked{% endif %}>
                    <label class="form-check-label" for="location_type_all">{% translate "Tous" %}</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="location_type" id="location_type_naturerwiz" value="naturerwiz"
                        {% if selected_location_type == 'naturerwiz' %}checked{% endif %}>
                    <label class="form-check-label" for="location_type_naturerwiz">{% translate "GIEP" %}</label>
                </div>
            </div>
        </div>
        <div class="col-12">
            <button type="button" id="apply-filters" class="btn btn-primary">{% translate "Filtrer" %}</button>
            <button type="button" id="reset-filters" class="btn btn-secondary">{% translate "Réinitialiser" %}</button>
        </div>
    </form>
{% endblock locations_filter_form %}

{% block location_row_actions %}
{% if can_create_location %}
<button type="button" class="btn btn-sm btn-outline-primary" data-location-create
        title="{% translate 'Créer une nouvelle localisation GIEP' %}">
    <i class="bi bi-plus-circle"></i>
</button>
{% endif %}
{% endblock location_row_actions %}

{% block assets_filter_form %}
    <form method="get" id="assets-filter-form" class="row g-3 mb-3 me-3" style="width: 600px;">
        <div class="col-6">
            <label for="category" class="form-label">{% translate "Catégorie" %}</label>
            <select name="category" id="category" class="form-select" multiple>
                {% for key, value in category_choices %}
                    <option value="{{ key }}" {% if key in selected_categories %}selected{% endif %}>
                        {{ value }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-12 d-flex justify-content-between mt-4" style="width: 200px;">
            <button type="button" id="apply-assets-filters" class="btn btn-sm btn-primary">{% translate "Filtrer" %}</button>
            <button type="button" id="reset-assets-filters" class="btn btn-sm btn-secondary">{% translate "Réinitialiser" %}</button>
        </div>
    </form>
{% endblock assets_filter_form %}

{% block asset_row_actions %}
{% if can_create_asset and not preventive_draft_id %}
<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addWaterAssetModal"
        title="{% translate 'Créer un nouvel ouvrage GIEP' %}">
    <i class="bi bi-plus-circle"></i>
</button>
{% endif %}
{% endblock asset_row_actions %}

{% block const_script %}
<script>
    const locationsgeojsonUrl = "{% url 'assets:water_locations_geojson' %}";
    const assetsgeojsonUrl = "{% url 'assets:water_assets_geojson' %}";
    
    const locationsurl = "";
    const assetsurl = "{% url 'assets:water_index' %}";
    
    var locations_property_fields = ['name'];
    var locations_columns = [
        { field: 'name', title: '{% translate "Nom" %}' }
    ];

    var assets_property_fields = ['category', 'area'];
    var assets_columns = [
        { field: 'category', title: '{% translate "Catégorie" %}' },
        { field: 'area', title: '{% translate "Superficie" %}' }
    ];

    const locations_layer_def = {
        id: 'locations',
        type: 'fill',
        source: 'locations',
        paint: {
            'fill-color': '#0094ff',
            'fill-opacity': 0
        }
    };
    var locations_outline_layer = {
        id: 'locations-outline',
        type: 'line',
        source: 'locations',
        paint: {
            'line-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
                '#0094ff'
            ],
            'line-width': 1,
            'line-opacity': 0.7
        }
    };

    const assets_hollow_surfaces_layer_def = {
        id: 'assets-hollow',
        type: 'fill',
        source: 'assets',
        filter: [
            'all',
            ['==', ['get', 'asset_type'], 'naturerwiasset'],
            ['any',
                ['==', ['geometry-type'], 'Polygon'],
                ['==', ['geometry-type'], 'MultiPolygon']
            ]
        ],
        paint: {
            'fill-color': [
                'match', ['get', 'structure_type'],
                ['massif drainant', 'tranchee drainante', 'collecteur en beton poreux', 'empierrement sedimentation'], '#8d6e63',
                ['jardin de pluie', 'noue', 'toiture verte', 'bande filtrante', 'espace vert sur dalle'], '#009688',
                ['bassin sec/infiltration', 'bassin en eau', 'bassin orage', 'citerne', 'toiture stockante', 'SAUL-vide', 'SAUL-terre'], '#0277bd',
                '#0288d1'
            ],
            'fill-opacity': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 0.8,
                0.6
            ],
            'fill-outline-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
                '#01579B'
            ],
        },
        minzoom: 8
    };

    const assets_lines_layer_def = {
        id: 'assets-lines',
        type: 'line',
        source: 'assets',
        filter: [
            'all',
            ['==', ['get', 'asset_type'], 'naturerwiasset'],
            ['any',
                ['==', ['geometry-type'], 'LineString'],
                ['==', ['geometry-type'], 'MultiLineString']
            ]
        ],
        paint: {
            'line-color': [
                'match', ['get', 'structure_type'],
                ['massif drainant', 'tranchee drainante', 'drain', 'collecteur en beton poreux', 'reseau egout separatif'], '#8d6e63',
                ['noue', 'jardin de pluie', 'bande filtrante'], '#009688',
                ['filet eau', 'caniveau infiltrant', 'gargouille de trottoir', 'avaloir de rail', 'trop plein'], '#0277bd',
                '#0288d1'
            ],
            'line-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 5,
                3
            ],
            'line-opacity': 0.8
        },
        minzoom: 8
    };

    const assets_points_layer_def = {
        id: 'assets-points',
        type: 'circle',
        source: 'assets',
        filter: [
            'all',
            ['==', ['get', 'asset_type'], 'naturerwiasset'],
            ['any',
                ['==', ['geometry-type'], 'Point'],
                ['==', ['geometry-type'], 'MultiPoint']
            ]
        ],
        paint: {
            'circle-radius': [
                'interpolate', ['linear'], ['zoom'],
                8,  1,
                12, 1.5,
                16, 2.5,
                20, 5
            ],
            'circle-color': [
                'match', ['get', 'structure_type'],
                ['massif drainant', 'tranchee drainante', 'drain', 'collecteur en beton poreux', 'reseau egout separatif'], '#8d6e63',
                ['noue', 'jardin de pluie', 'bande filtrante'], '#009688',
                ['bassin sec/infiltration', 'bassin en eau', 'bassin orage', 'citerne', 'toiture stockante'], '#0277bd',
                '#0288d1'
            ],
            'circle-stroke-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 2,
                1
            ],
            'circle-stroke-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
                '#000000'
            ],
            'circle-opacity': 0.8
        },
        minzoom: 8
    };

    const assets_layers_defs = [assets_hollow_surfaces_layer_def, assets_lines_layer_def, assets_points_layer_def];
</script>
{% endblock const_script %}

{% block extra_script %}
{% if can_create_location %}
{% include "assets/components/location_edit_modals.html" with thematic_code=thematic_code location_type=location_type entry_label="Zone GIEP" %}
{% endif %}
{% if can_create_asset %}
{% include "assets/components/add_asset_modal.html" with modal_id="addWaterAssetModal" thematic_code="water" categories=water_categories %}
<script src="{% static 'assets/asset_add_modal.js' %}"></script>
{% endif %}
{% endblock extra_script %}