{% extends 'base/layout.html' %}
{% load static %}
{% load i18n %}

{% block title %}Network Map{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-2">
    <h1 class="page-title mb-0">
        <i class="mdi mdi-map" aria-hidden="true"></i> Network Map
    </h1>
</div>

{# ── Toolbar ─────────────────────────────────────────────────────────────── #}
<div class="card mb-2">
    <div class="card-body py-2">
        <div class="d-flex flex-wrap align-items-center gap-2">

            {# Object counts — updated by JS after client-side filtering #}
            <span class="text-muted small me-2" id="objectCounts">
                <i class="mdi mdi-map-marker"></i>
                <span id="countSites">{{ total_sites }}</span>{% if sites_truncated %}+{% endif %}/{{ total_sites }} sites
                &nbsp;·&nbsp;
                <i class="mdi mdi-vector-polyline"></i>
                <span id="countSegments">{{ total_segments }}</span>{% if segments_truncated %}+{% endif %}/{{ total_segments }} segments
                &nbsp;·&nbsp;
                <i class="mdi mdi-transit-connection-variant"></i>
                <span id="countCircuits">{{ total_circuits }}</span>{% if circuits_truncated %}+{% endif %}/{{ total_circuits }} circuits
            </span>

            {# Segment colour scheme #}
            <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-palette" aria-hidden="true"></i>
                    Segments: <span id="segmentSchemeName">Status</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" data-segment-scheme="status">
                        <i class="mdi mdi-circle-medium" style="color:#1565c0"></i> By Status
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-segment-scheme="provider">
                        <i class="mdi mdi-circle-medium" style="color:#c62828"></i> By Provider
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-segment-scheme="segment_type">
                        <i class="mdi mdi-circle-medium" style="color:#6a1b9a"></i> By Segment Type
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-segment-scheme="ownership_type">
                        <i class="mdi mdi-circle-medium" style="color:#e65100"></i> By Ownership Type
                    </a></li>
                </ul>
            </div>

            {# Circuit colour scheme #}
            <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-palette" aria-hidden="true"></i>
                    Circuits: <span id="circuitSchemeName">Status</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" data-circuit-scheme="status">
                        <i class="mdi mdi-circle-medium" style="color:#ad1457"></i> By Status
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-circuit-scheme="provider">
                        <i class="mdi mdi-circle-medium" style="color:#c62828"></i> By Provider
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-circuit-scheme="type">
                        <i class="mdi mdi-circle-medium" style="color:#6a1b9a"></i> By Type
                    </a></li>
                </ul>
            </div>

            {# Site colour scheme #}
            <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-palette" aria-hidden="true"></i>
                    Sites: <span id="siteSchemeName">Status</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" data-site-scheme="status">
                        <i class="mdi mdi-circle-medium" style="color:#1565c0"></i> By Status
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-site-scheme="tenant">
                        <i class="mdi mdi-circle-medium" style="color:#6a1b9a"></i> By Tenant
                    </a></li>
                    <li><a class="dropdown-item" href="#" data-site-scheme="region">
                        <i class="mdi mdi-circle-medium" style="color:#e65100"></i> By Region
                    </a></li>
                </ul>
            </div>

            {# Legend #}
            <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-map-legend" aria-hidden="true"></i> Legend
                </button>
                <ul class="dropdown-menu" id="legendDropdown" style="min-width:220px;">
                    {# Populated by JS #}
                </ul>
            </div>

            {# Visibility toggles #}
            <div class="btn-group" role="group">
                <button type="button"
                        class="btn btn-sm btn-success"
                        id="toggleSegments"
                        title="Hide segments">
                    <i class="mdi mdi-vector-polyline"></i> Segments
                </button>
                <button type="button"
                        class="btn btn-sm btn-outline-warning"
                        id="toggleCircuits"
                        title="Show circuits">
                    <i class="mdi mdi-transit-connection-variant"></i> Circuits
                </button>
                <button type="button"
                        class="btn btn-sm btn-primary"
                        id="toggleSites"
                        title="Hide sites">
                    <i class="mdi mdi-map-marker"></i> Sites
                </button>
            </div>

            {# Fit all #}
            <button type="button" id="fitBounds" class="btn btn-outline-primary btn-sm">
                <i class="mdi mdi-fit-to-page-outline" aria-hidden="true"></i> Fit All
            </button>

            {# Tile layer picker #}
            {% include './inc/map_layer_dropdown.html' %}

        </div>
    </div>
</div>

{# ── Active filter chips ───────────────────────────────────────────────────── #}
<div id="activeFilters" class="flex-wrap gap-1 mb-2" style="display:none;">
    {# Populated by JS — one dismissible chip per active filter value #}
</div>

{% if sites_truncated or segments_truncated or circuits_truncated %}
<div class="alert alert-warning py-1 mb-2" role="alert">
    <i class="mdi mdi-alert" aria-hidden="true"></i>
    Results capped at 500 objects per type.
</div>
{% endif %}

{# ── Two-column layout: map + filter sidebar ─────────────────────────────── #}
<div class="d-flex gap-2 align-items-start">

    {# ── Map ──────────────────────────────────────────────────────────────── #}
    <div style="flex:1; min-width:0;">
        <div id="map" style="height:800px; width:100%; border:1px solid #ddd; border-radius:4px;"></div>
    </div>

    {# ── Right column: info card + filter sidebar ────────────────────────── #}
    <div style="width:285px; flex-shrink:0; display:flex; flex-direction:column; gap:0.5rem;">

    {# ── Info card — populated by JS on click ─────────────────────────────── #}
    <div id="infoCard" class="card" style="display:none;">
        <div class="card-header py-2 d-flex align-items-center justify-content-between">
            <span class="fw-bold small" id="infoCardTitle">
                <i class="mdi mdi-information-outline"></i> Details
            </span>
            <button type="button" class="btn-close btn-sm" id="infoCardClose" aria-label="Close"></button>
        </div>
        <div class="card-body p-2" id="infoCardBody" style="overflow-y:auto; max-height:360px; font-size:0.8rem;">
        </div>
    </div>

    {# ── Filter sidebar ───────────────────────────────────────────────────── #}
    <div id="filterSidebar">
        <div class="card h-100">
            <div class="card-header py-1 d-flex align-items-center justify-content-between">
                <span class="fw-bold small">
                    <i class="mdi mdi-filter-outline"></i> Filters
                </span>
                <span class="d-flex align-items-center gap-1">
                    <span id="filterCount" class="badge text-bg-primary" style="display:none;"></span>
                    <button type="button" id="clearFiltersHeader" class="btn btn-outline-secondary" style="display:none; font-size:0.7rem; padding:1px 6px; line-height:1.2;" title="Clear all filters">
                        <i class="mdi mdi-filter-off-outline"></i> Clear
                    </button>
                </span>
            </div>
            <div class="card-body p-2" style="overflow-y:auto; max-height:780px; font-size:0.78rem;">

                {# ── Spatial (shared) ──────────────────────────── #}
                <div class="text-muted text-uppercase fw-bold mb-1" style="font-size:0.68rem; letter-spacing:.04em;">
                    <i class="mdi mdi-map-search-outline"></i> Location
                </div>
                <div class="mb-1">
                    <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.region_id.label }}</label>
                    {{ filter_form.region_id }}
                </div>
                <div class="mb-1">
                    <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.site_group_id.label }}</label>
                    {{ filter_form.site_group_id }}
                </div>
                <div class="mb-1">
                    <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.at_any_site.label }}</label>
                    {{ filter_form.at_any_site }}
                </div>

                {# ── Sites ─────────────────────────────────────── #}
                <div id="filterSectionSites">
                    <hr class="my-1">
                    <div class="text-muted text-uppercase fw-bold mb-1" style="font-size:0.68rem; letter-spacing:.04em;">
                        <i class="mdi mdi-map-marker"></i> Sites
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.site_status.label }}</label>
                        {{ filter_form.site_status }}
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.site_tenant_id.label }}</label>
                        {{ filter_form.site_tenant_id }}
                    </div>
                </div>

                {# ── Segments ──────────────────────────────────── #}
                <div id="filterSectionSegments">
                    <hr class="my-1">
                    <div class="text-muted text-uppercase fw-bold mb-1" style="font-size:0.68rem; letter-spacing:.04em;">
                        <i class="mdi mdi-vector-polyline"></i> Segments
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.segment_status.label }}</label>
                        {{ filter_form.segment_status }}
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.segment_type.label }}</label>
                        {{ filter_form.segment_type }}
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.segment_provider_id.label }}</label>
                        {{ filter_form.segment_provider_id }}
                    </div>
                </div>

                {# ── Circuits ──────────────────────────────────── #}
                <div id="filterSectionCircuits">
                    <hr class="my-1">
                    <div class="text-muted text-uppercase fw-bold mb-1" style="font-size:0.68rem; letter-spacing:.04em;">
                        <i class="mdi mdi-transit-connection-variant"></i> Circuits
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.circuit_status.label }}</label>
                        {{ filter_form.circuit_status }}
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.circuit_type_id.label }}</label>
                        {{ filter_form.circuit_type_id }}
                    </div>
                    <div class="mb-1">
                        <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.circuit_provider_id.label }}</label>
                        {{ filter_form.circuit_provider_id }}
                    </div>
                </div>

                <div class="d-grid mt-1">
                    <button type="button" id="clearFilters" class="btn btn-outline-secondary btn-sm">
                        <i class="mdi mdi-filter-off-outline" aria-hidden="true"></i> Clear Filters
                    </button>
                </div>

            </div>
        </div>
    </div>

    </div>{# end right column #}

</div>{# end two-column layout #}

{% include './inc/leaflet_includes.html' %}
{% include './inc/map_layers_styles.html' %}

{# Data blob — read by object_map.js #}
<script type="application/json" id="map-data">
{
    "sites":           {{ sites_data_json|safe }},
    "segments":        {{ segments_data_json|safe }},
    "circuits":        {{ circuits_data_json|safe }},
    "regionAncestors": {{ region_ancestors_json|safe }},
    "mapBounds":       {{ map_bounds_json|safe }},
    "mapCenter":       {{ map_center_json|safe }},
    "apiUrl":          "{{ segments_api_url|escapejs }}"
}
</script>

{% include './inc/map_layers_config.html' %}

<script>
var _mapData = JSON.parse(document.getElementById('map-data').textContent);
var map = L.map('map').setView([_mapData.mapCenter.lat, _mapData.mapCenter.lng], _mapData.mapCenter.zoom);
initializeMapLayers(map);
</script>
<script src="{% static 'cesnet_service_path_plugin/js/object_map.js' %}"></script>

{% endblock content %}