{% extends "interventions/add/intervention_add.html" %}
{% load static %}
{% load i18n %}

{% block sublocation %}
    <div class="mb-1 fst-italic">
        <label class="form-label">{% translate "Adresse" %}:</label>
        <span  class="badge text-bg-primary" id="address_result"></span>
    </div>
    <div class="mb-3 fst-italic d-flex align-items-center">
        <label class="form-label mb-0 me-2 pb-1">{% translate "Equipement" %} <span class="text-danger">*</span>: </label>
        <div id="equipment_result_summary" class="d-flex flex-wrap gap-2"></div>
    </div>
{% endblock sublocation %}

{% block subscript %}
    <script>
        var autocomplete_assets_url = "{% url 'assets:artworks_autocomplete_assets' %}";

        map.on('load', async () => {

            const fountains_layer_def = {
                'id': 'fountains',
                'type': 'circle',
                'source': 'fountains',
                'paint': {
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        10, 1,
                        17, 25
                    ],
                    'circle-color': '#0000aa',
                    'circle-opacity': 0.7
                }
            }

            const fountains_label_def = {
                'id': 'fountains-labels',
                'type': 'symbol',
                'source': 'fountains',
                'layout': {
                    'text-field': ['get', 'name_fr'],
                    'text-size': 12,
                    'text-offset': [0, 1.2],
                    'text-anchor': 'top'
                },
                'paint': {
                    'text-color': '#0094ff',
                    'text-halo-color': '#ffffff',
                    'text-halo-width': 1.5
                },
                'minzoom': 13,
            };

            map.addSource(
                'fountains',
                {
                    'type': 'geojson',
                    'data': window.location.origin + '/assets/artworks/fountains/geojson/'
                }
            );
            map.addLayer(fountains_layer_def);
            map.addLayer(fountains_label_def);



            const monuments_layer_def = {
                'id': 'monuments',
                'type': 'circle',
                'source': 'monuments',
                'paint': {
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        10, 1,
                        17, 25
                    ],
                    'circle-color': '#f24141',
                    'circle-opacity': 0.7
                }
            }

            const monuments_label_def = {
                'id': 'monuments-labels',
                'type': 'symbol',
                'source': 'monuments',
                'layout': {
                    'text-field': ['get', 'name_fr'],
                    'text-size': 12,
                    'text-offset': [0, 1.2],
                    'text-anchor': 'top'
                },
                'paint': {
                    'text-color': '#f24141',
                    'text-halo-color': '#ffffff',
                    'text-halo-width': 1.5
                },
                'minzoom': 13,
            };

            map.addSource(
                'monuments',
                {
                    'type': 'geojson',
                    'data': window.location.origin + '/assets/artworks/monuments/geojson/'
                }
            );
            map.addLayer(monuments_layer_def);
            map.addLayer(monuments_label_def);
        
        });
    </script>
{% endblock subscript %}