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

{% block title %}Circuit map{% endblock %}

{% block head %}
    {# Leaflet #}
    <link rel="stylesheet" href="{% static 'netbox_circuit_map/leaflet/leaflet.css' %}">
    <script src="{% static 'netbox_circuit_map/leaflet/leaflet.js' %}"></script>
    {# Leaflet plugins #}
    <link rel="stylesheet" href="{% static 'netbox_circuit_map/leaflet.fullscreen/Control.FullScreen.css' %}">
    <script src="{% static 'netbox_circuit_map/leaflet.fullscreen/Control.FullScreen.js' %}"></script>
    <script src="{% static 'netbox_circuit_map/js/svg-icon.js' %}"></script>
    <link rel="stylesheet" href="{% static 'netbox_circuit_map/leaflet-sidebar/L.Control.Sidebar.css' %}">
    <script src="{% static 'netbox_circuit_map/leaflet-sidebar/L.Control.Sidebar.js' %}"></script>
    <link rel="stylesheet" href="{% static 'netbox_circuit_map/leaflet.markercluster/MarkerCluster.css' %}">
    <link rel="stylesheet" href="{% static 'netbox_circuit_map/leaflet.markercluster/MarkerCluster.Default.css' %}">
    <script src="{% static 'netbox_circuit_map/leaflet.markercluster/leaflet.markercluster.js' %}"></script>

    <link rel="stylesheet" href="{% static 'netbox_circuit_map/style.css' %}">
{% endblock %}

{% block content-wrapper %}
<div class="px-3 h-100 d-flex flex-column">
    <ul class="nav nav-tabs px-3">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="map-tab" data-bs-toggle="tab" data-bs-target="#map"
                    type="button" role="tab" aria-controls="map" aria-selected="true">
                Geographical map
                {% if map_data %}<span class="badge bg-secondary">{{ map_data.sites|length }}</span>{% endif %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="filters-form-tab" data-bs-toggle="tab" data-bs-target="#filters-form"
                    type="button" role="tab" aria-controls="filters-form" aria-selected="true">
                Filters
            </button>
        </li>
    </ul>
    <div class="tab-content flex-grow-1" style="min-height:400px">
        <div class="tab-pane active h-100" id="map" role="tabpanel" aria-labelledby="map-tab">
            <div class="d-flex flex-column h-100">
                {% if map_data %}
                    <div class="mb-3">
                        {% if non_geolocated_sites %}
                            <p>
                                <a class="btn btn-sm btn-outline-secondary text-toggle" data-bs-toggle="collapse"
                                href="#notShownSites"
                                role="button" aria-expanded="false" aria-controls="collapseExample">
                                    <span class="text-collapsed">Show</span>
                                    <span class="text-expanded">Hide</span>
                                    sites that are not geolocated ({{ non_geolocated_sites|length }})
                                </a>
                            </p>
                            <div class="collapse" id="notShownSites">
                                <div class="card card-body">
                                    <ul>
                                        {% for site in non_geolocated_sites %}
                                            <li>
                                                <a href="{{ site.get_absolute_url }}"
                                                target="_blank">{{ site.name }}</a>
                                                <span class="separator">·</span>
                                                <span class="text-muted">{{ site.tenant.name }}</span>
                                                <span class="separator">·</span>
                                                <span class="text-muted">{{ site.physical_address }}</span>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div id="{{ map_data.map_id }}" class="flex-grow-1"></div>
                    <div id="map-sidebar">
                        <div class="h3 sidebar-site-name"></div>
                        <div class="h6 sidebar-site-tenant"></div>
                        <div class="h5 sidebar-site-address"></div>
                    </div>
                    {{ map_data|json_script:"map-data" }}
                    <script src="{% static 'netbox_circuit_map/js/map.js' %}"></script>
                {% else %}
                    Please specify filtering criteria for displaying the map
                {% endif %}
            </div>
        </div>
        <div class="tab-pane" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
            {% include 'inc/filter_list.html' %}
        </div>
    </div>
</div>
{% endblock %}