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

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

{% block content %}
<style>
  /* Prevent the page body from scrolling — the map layout is viewport-fixed */
  .page-wrapper { overflow: hidden; }
  /* Bootstrap tab-pane active override: use flex for scrollable panes */
  #pane-filters.tab-pane.show.active,
  #pane-list.tab-pane.show.active { display: flex !important; }
</style>
<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' %}

            {# Edit mode toggle — only for users with dcim.change_site #}
            {% if can_edit %}
            <button type="button" id="editModeToggle"
                    class="btn btn-outline-warning btn-sm ms-2"
                    title="Toggle edit mode">
                <i class="mdi mdi-pencil"></i> Edit
            </button>
            {% endif %}

        </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 id="mapLayout" class="d-flex gap-2 align-items-stretch" style="height:var(--map-avail-height,80vh); min-height:400px;">

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

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

    {# ── Info card — populated by JS on click ─────────────────────────────── #}
    <div id="infoCard" class="card" style="display:none; flex-shrink:0; max-height:35%;">
        <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; font-size:0.8rem;">
        </div>
    </div>

    {# ── Right panel: Filters | List tabs ────────────────────────────────── #}
    <div id="filterSidebar" style="flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden;">
        <div class="card" style="flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden;">

            {# Tab nav in card header #}
            <div class="card-header py-1" style="flex-shrink:0;">
                <div class="d-flex align-items-center justify-content-between">
                    <ul class="nav nav-pills" id="rightPanelTabs" role="tablist" style="gap:2px;">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active py-1 px-2" id="tab-filters" data-bs-toggle="tab"
                                    data-bs-target="#pane-filters" type="button" role="tab"
                                    style="font-size:0.78rem;">
                                <i class="mdi mdi-filter-outline"></i> Filters
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link py-1 px-2" id="tab-list" data-bs-toggle="tab"
                                    data-bs-target="#pane-list" type="button" role="tab"
                                    style="font-size:0.78rem;">
                                <i class="mdi mdi-format-list-bulleted"></i> List
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="tab-content" style="flex:1; min-height:0; overflow:hidden;">

                {# ── Filters pane ──────────────────────────────── #}
                <div class="tab-pane fade show active h-100" id="pane-filters" role="tabpanel" style="flex-direction:column;">
                    <div class="card-body p-2" style="overflow-y:auto; flex:1; font-size:0.78rem;">

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

                        {# ── 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">
                                <div class="mb-1" style="font-size:0.75rem;">Status</div>
                                <div class="d-flex flex-wrap gap-1">
                                    {% for value, label, color in site_status_choices %}
                                    <input type="checkbox" class="btn-check" name="site_status"
                                           id="site_status_{{ value }}" value="{{ value }}" autocomplete="off">
                                    <label class="btn btn-outline-{{ color }}" for="site_status_{{ value }}"
                                           style="font-size:0.65rem; padding:0 6px; height:20px; display:inline-flex; align-items:center;">{{ label }}</label>
                                    {% endfor %}
                                </div>
                            </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 class="mb-1">
                                <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.site_tag_id.label }}</label>
                                {{ filter_form.site_tag_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">
                                <div class="mb-1" style="font-size:0.75rem;">Status</div>
                                <div class="d-flex flex-wrap gap-1">
                                    {% for value, label, color in segment_status_choices %}
                                    <input type="checkbox" class="btn-check" name="segment_status"
                                           id="segment_status_{{ value }}" value="{{ value }}" autocomplete="off">
                                    <label class="btn btn-outline-{{ color }}" for="segment_status_{{ value }}"
                                           style="font-size:0.65rem; padding:0 6px; height:20px; display:inline-flex; align-items:center;">{{ label }}</label>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="mb-1">
                                <div class="mb-1" style="font-size:0.75rem;">Type</div>
                                <div class="d-flex flex-wrap gap-1">
                                    {% for value, label, color in segment_type_choices %}
                                    <input type="checkbox" class="btn-check" name="segment_type"
                                           id="segment_type_{{ value }}" value="{{ value }}" autocomplete="off">
                                    <label class="btn btn-outline-{{ color }}" for="segment_type_{{ value }}"
                                           style="font-size:0.65rem; padding:0 6px; height:20px; display:inline-flex; align-items:center;">{{ label }}</label>
                                    {% endfor %}
                                </div>
                            </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 class="mb-1">
                                <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.segment_tag_id.label }}</label>
                                {{ filter_form.segment_tag_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">
                                <div class="mb-1" style="font-size:0.75rem;">Status</div>
                                <div class="d-flex flex-wrap gap-1">
                                    {% for value, label, color in circuit_status_choices %}
                                    <input type="checkbox" class="btn-check" name="circuit_status"
                                           id="circuit_status_{{ value }}" value="{{ value }}" autocomplete="off">
                                    <label class="btn btn-outline-{{ color }}" for="circuit_status_{{ value }}"
                                           style="font-size:0.65rem; padding:0 6px; height:20px; display:inline-flex; align-items:center;">{{ label }}</label>
                                    {% endfor %}
                                </div>
                            </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 class="mb-1">
                                <label class="mb-0" style="font-size:0.75rem;">{{ filter_form.circuit_tag_id.label }}</label>
                                {{ filter_form.circuit_tag_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>{# end pane-filters #}

                {# ── List pane ─────────────────────────────────── #}
                <div class="tab-pane fade h-100" id="pane-list" role="tabpanel" style="flex-direction:column;">
                    <div class="card-body p-2" style="font-size:0.78rem; display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;">

                        {# Type toggles — mirrors main toolbar visibility #}
                        <div class="d-flex gap-1 mb-1">
                            <input type="checkbox" class="btn-check" id="listShowSites"     autocomplete="off" checked>
                            <label class="btn btn-outline-primary flex-fill"     for="listShowSites"
                                   style="font-size:0.72rem; padding:0; height:24px; display:flex; align-items:center; justify-content:center;">
                                <i class="mdi mdi-map-marker" style="line-height:1;"></i>&nbsp;Sites
                            </label>
                            <input type="checkbox" class="btn-check" id="listShowSegments"  autocomplete="off" checked>
                            <label class="btn btn-outline-success flex-fill"  for="listShowSegments"
                                   style="font-size:0.72rem; padding:0; height:24px; display:flex; align-items:center; justify-content:center;">
                                <i class="mdi mdi-vector-polyline" style="line-height:1;"></i>&nbsp;Segs
                            </label>
                            <input type="checkbox" class="btn-check" id="listShowCircuits"  autocomplete="off" checked>
                            <label class="btn btn-outline-warning flex-fill"  for="listShowCircuits"
                                   style="font-size:0.72rem; padding:0; height:24px; display:flex; align-items:center; justify-content:center;">
                                <i class="mdi mdi-transit-connection-variant" style="line-height:1;"></i>&nbsp;Circs
                            </label>
                        </div>
                        <div class="text-muted mb-1" style="font-size:0.68rem;">
                            <i class="mdi mdi-information-outline"></i>
                            Mirrors map visibility. Use to narrow this list only — does not affect the map.
                        </div>

                        {# Search #}
                        <div class="mb-1">
                            <input type="search" id="listSearch" class="form-control form-control-sm"
                                   placeholder="Search by name…" autocomplete="off">
                        </div>

                        {# Count #}
                        <div id="listCount" class="text-muted mb-1" style="font-size:0.72rem;"></div>

                        {# Scrollable object rows #}
                        <div id="objectList" style="overflow-y:auto; flex:1; min-height:0;">
                        </div>

                    </div>
                </div>{# end pane-list #}

            </div>{# end tab-content #}
        </div>
    </div>

    {# ── Edit mode panel — shown instead of filter sidebar in edit mode ── #}
    {% if can_edit %}
    <div id="editModePanel" style="display:none; flex:1; overflow-y:auto; min-height:0;">
        {# Populated entirely by edit_mode_ui.js #}
    </div>
    {% endif %}

    </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 }}",
    "canEdit":         {{ can_edit|yesno:"true,false" }}
}
</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);
window._leafletMap = map;
initializeMapLayers(map);
initializeLayerSwitching(map);
</script>
<script src="{% static 'cesnet_service_path_plugin/js/object_map.js' %}?v=4"></script>
{% if can_edit %}
<script src="{% static 'cesnet_service_path_plugin/js/edit_mode_state_machine.js' %}?v=8"></script>
<script src="{% static 'cesnet_service_path_plugin/js/edit_mode_api.js' %}?v=7"></script>
<script src="{% static 'cesnet_service_path_plugin/js/edit_mode_marker.js' %}?v=7"></script>
<script src="{% static 'cesnet_service_path_plugin/js/edit_mode_ui.js' %}?v=14"></script>
{% endif %}

<script>
(function () {
    function setMapHeight() {
        const layout = document.getElementById('mapLayout');
        if (!layout) return;
        const top = layout.getBoundingClientRect().top + window.scrollY;
        const available = window.innerHeight - top - 16;  // 16px bottom breathing room
        document.documentElement.style.setProperty('--map-avail-height', Math.max(400, available) + 'px');
        if (window._leafletMap) window._leafletMap.invalidateSize();
    }
    document.addEventListener('DOMContentLoaded', setMapHeight);
    window.addEventListener('resize', setMapHeight);
    // Also run immediately in case DOMContentLoaded already fired
    if (document.readyState !== 'loading') setMapHeight();
})();
</script>

{% endblock content %}