{% load i18n %}
{% include 'cesnet_service_path_plugin/inc/leaflet_includes.html' %}
{% include 'cesnet_service_path_plugin/inc/map_layers_styles.html' %}
<div class="col col-md-12">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="mdi mdi-map" aria-hidden="true"></i> {{ map_card_title }}
            </h5>
            <div class="d-flex gap-2 flex-wrap">
                <!-- Color scheme selector -->
                <div class="btn-group" role="group">
                    <button type="button"
                            class="btn btn-outline-info btn-sm dropdown-toggle"
                            data-bs-toggle="dropdown"
                            id="{{ map_element_id }}-colorSchemeButton">
                        <i class="mdi mdi-palette" aria-hidden="true"></i>
                        <span id="{{ map_element_id }}-currentColorScheme">{% trans "Status" %}</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-scheme="status">
                            <i class="mdi mdi-circle-medium" style="color:#198754;"></i> {% trans "By Status" %}
                        </a></li>
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-scheme="provider">
                            <i class="mdi mdi-circle-medium" style="color:#e74c3c;"></i> {% trans "By Provider" %}
                        </a></li>
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-scheme="segment_type">
                            <i class="mdi mdi-circle-medium" style="color:#9c27b0;"></i> {% trans "By Segment Type" %}
                        </a></li>
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-scheme="ownership_type">
                            <i class="mdi mdi-circle-medium" style="color:#0d6efd;"></i> {% trans "By Ownership Type" %}
                        </a></li>
                    </ul>
                </div>
                <!-- Legend -->
                <div class="btn-group" role="group">
                    <button type="button"
                            class="btn btn-outline-info btn-sm dropdown-toggle"
                            data-bs-toggle="dropdown">
                        <i class="mdi mdi-map-legend" aria-hidden="true"></i> {% trans "Legend" %}
                    </button>
                    <ul class="dropdown-menu" id="{{ map_element_id }}-legendDropdown"></ul>
                </div>
                <!-- Path Data Filter -->
                <div class="btn-group" role="group">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm dropdown-toggle"
                            data-bs-toggle="dropdown">
                        <i class="mdi mdi-vector-polyline" aria-hidden="true"></i>
                        <span id="{{ map_element_id }}-currentPathFilter">{% trans "All Segments" %}</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-path-filter="all">
                            <i class="mdi mdi-filter-off-outline"></i> {% trans "All Segments" %}
                        </a></li>
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-path-filter="with">
                            <i class="mdi mdi-vector-polyline"></i> {% trans "With Path Data" %}
                        </a></li>
                        <li><a class="dropdown-item" href="#" data-map="{{ map_element_id }}" data-path-filter="without">
                            <i class="mdi mdi-vector-polyline-remove"></i> {% trans "Without Path Data" %}
                        </a></li>
                    </ul>
                </div>
                <!-- Fit All -->
                <button id="{{ map_element_id }}-fit-bounds" class="btn btn-outline-primary btn-sm">
                    <i class="mdi mdi-fit-to-page-outline" aria-hidden="true"></i> {% trans "Fit All" %}
                </button>
                {% include 'cesnet_service_path_plugin/inc/map_layer_dropdown.html' %}
            </div>
        </div>
        <div class="card-body">
            {% if map_warning %}
                <div class="alert alert-warning" role="alert">
                    <i class="mdi mdi-alert" aria-hidden="true"></i> {{ map_warning }}
                </div>
            {% endif %}
            <div id="{{ map_element_id }}"
                 style="height: 600px; width: 100%; border: 1px solid #ddd; border-radius: 4px;"></div>
            <!-- Segment info panel -->
            <div id="{{ map_element_id }}-segmentInfo" class="mt-3" style="display:none;">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="card-title mb-0">{% trans "Selected Segment" %}</h6>
                        <button type="button" class="btn-close"
                                onclick="document.getElementById('{{ map_element_id }}-segmentInfo').style.display='none'">
                        </button>
                    </div>
                    <div class="card-body" id="{{ map_element_id }}-segmentInfoContent"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'cesnet_service_path_plugin/inc/map_layers_config.html' %}
<script type="application/json" id="{{ map_element_id }}-config">
{
    "mapId":                "{{ map_element_id|escapejs }}",
    "fitBoundsId":          "{{ map_element_id|escapejs }}-fit-bounds",
    "legendId":             "{{ map_element_id|escapejs }}-legendDropdown",
    "currentSchemeId":      "{{ map_element_id|escapejs }}-currentColorScheme",
    "currentPathFilterId":  "{{ map_element_id|escapejs }}-currentPathFilter",
    "infoId":               "{{ map_element_id|escapejs }}-segmentInfo",
    "infoContentId":        "{{ map_element_id|escapejs }}-segmentInfoContent",
    "segmentsData":         {{ segments_data_json|safe }},
    "mapBounds":            {{ map_bounds_json|safe }},
    "apiUrl":               "{{ map_api_url|escapejs }}",
    "appendLocationSearch": false
}
</script>
<script>
(function() {
    var _cfg = JSON.parse(document.getElementById('{{ map_element_id|escapejs }}-config').textContent);
    var _map = L.map(_cfg.mapId).setView([49.75, 15.5], 7);
    initializeMapLayers(_map);
    _cfg.map = _map;
    window.segmentsMapConfig = _cfg;
})();
</script>
{% include 'cesnet_service_path_plugin/inc/segments_map_js.html' %}