{% extends "base.html" %}

{% block css %}
    /* Styles for the node info card */
    #node_info {
        height: 100%;
    }

    /* Styles for the map */
    #map {
        height: 100%;
        min-height: 400px;
    }

    /* Styles for packet details section */
    #packet_details {
        height: 95vh;
        overflow: scroll;
        top: 3em;
    }

    /* Ensure inline display for details */
    div.tab-pane > dl {
        display: inline-block;
    }
{% endblock %}

{% block body %}

{% include "search_form.html" %}

<div id="node" class="container text-center">
    <div class="container"
         {% if node %}
         hx-ext="sse"
         sse-connect="/events?node_id={{node_id}}{% if portnum %}&portnum={{portnum}}{% endif %}"
         {% endif %}
    >
        <div class="row">
            <div class="col mb-3">
                <!-- Node Information Card -->
                <div class="card" id="node_info">
                    {% if node %}
                    <div class="card-header">
                        {{node.long_name}} ({{node.node_id|node_id_to_hex}})
                    </div>
                    <div class="card-body">
                        <dl>
                            <dt>ShortName</dt>
                            <dd>{{node.short_name}}</dd>
                            <dt>HW Model</dt>
                            <dd>{{node.hw_model}}</dd>
                            <dt>Role</dt>
                            <dd>{{node.role}}</dd>
                        </dl>
                        {% include "node_graphs.html" %}
                    </div>
                    {% else %}
                    <div class="card-body">
                        A NodeInfo has not been seen.
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="col mb-3">
                <!-- Map Container -->
                <div id="map"></div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <!-- Additional buttons can be included here -->
            </div>
        </div>

        <div class="row">
            <div class="col">
                {% include 'packet_list.html' %}
            </div>
            <!-- <div class="col sticky-top" id="packet_details"></div> -->
        </div>
    </div>
</div>

{% if trace %}
<script>
    var trace = {{ trace | tojson }}; // Load trace data into JavaScript
    var map = L.map('map').setView(trace[0], 13); // Initialize map centered at first trace point
    var markers = L.featureGroup(); // Create a feature group for markers
    markers.addTo(map);

    // Add tile layer (OpenStreetMap)
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Draw a polyline along the trace path
    L.polyline(trace, { color: 'blue', weight: 1}).addTo(map);

    // Add a red circle marker for the starting node with a tooltip
    var startMarker = L.circleMarker(trace[0], {
        radius: 8,
        color: 'red',
        weight: 1,
        fillColor: 'red',
        fillOpacity: 0.5
    }).addTo(markers) // Add to feature group
      .bindTooltip(`
        <b>{{node.long_name}}</b><br/>
        <b>Short:</b> {{node.short_name}}<br/>
        <b>Channel:</b> {{node.channel}}<br/>
        <b>Hardware:</b> {{node.hw_model}}<br/>
        <b>Role:</b> {{node.role}}<br/>
        <b>Firmware:</b> {{node.firmware}}<br/>
        <b>Coordinates:</b> [{{node.last_lat}} , {{node.last_long}}]
      `, {permanent: false, direction: 'top', opacity: 0.9});

    // Function to calculate distance and convert to miles
    function getDistanceInMiles(latlng1, latlng2) {
        var meters = latlng1.distanceTo(latlng2); // Get distance in meters
        return meters * 0.000621371; // Convert meters to miles
    }

    {% for n in neighbors %}
        var neighborLatLng = L.latLng([{{n.location[0]}}, {{n.location[1]}}]);
        var startLatLng = L.latLng(trace[0]);

        // Calculate distance in miles with 1 decimal place
        var distanceMiles = getDistanceInMiles(startLatLng, neighborLatLng).toFixed(1);

        // Create a blue circle marker for each neighbor node
        var m = L.circleMarker(neighborLatLng, {
            radius: 6,
            color: 'blue',
            weight: 1,
            fillColor: 'blue',
            fillOpacity: 0.5
        }).addTo(markers) // Add to feature group
          .bindTooltip(`
            <b>Neighbour: [{{n.short_name}}] {{n.long_name}}</b> <br/>
            <b>SNR:</b> {{n.snr}} <br/>
            <b>Distance:</b> ${distanceMiles} miles <br/>
        `, {permanent: false, direction: 'top', opacity: 0.9});

        // Draw a polyline from the first trace point to each neighbor node
        L.polyline([startLatLng, neighborLatLng], {
            color: 'grey',
            weight: 1
        }).addTo(map);

    {% endfor %}

    // Add a legend to the map
    var legend = L.control({ position: 'bottomleft' });

    legend.onAdd = function(map) {
        var div = L.DomUtil.create('div', 'info legend');
        div.style.background = 'white';
        div.style.padding = '8px';
        div.style.border = '1px solid black';
        div.style.borderRadius = '5px';
        div.style.boxShadow = '0 0 5px rgba(0,0,0,0.3)';
        div.style.color = 'black'; // Ensure text is black
        div.style.textAlign = 'left'; /* Ensure left alignment */
        div.innerHTML = `
        <b>Legend</b><br>
        <svg width="16" height="16">
            <circle cx="8" cy="8" r="6" fill="blue" stroke="blue" stroke-width="1" fill-opacity="0.4"/>
        </svg> Neighbor Node<br>
        <svg width="20" height="20">
            <circle cx="10" cy="10" r="8" fill="red" stroke="red" stroke-width="1" fill-opacity="0.4"/>
        </svg> Home Node<br>
        <svg width="20" height="4">
            <line x1="0" y1="2" x2="20" y2="2" stroke="grey" stroke-width="2"/>
        </svg> Connection to Neighbors<br>
        <svg width="20" height="4">
            <line x1="0" y1="2" x2="20" y2="2" stroke="blue" stroke-width="2"/>
        </svg> Path taken by node
        `;
        return div;
    };

    legend.addTo(map);

    // Ensure the map adjusts to fit all markers and trace points
    setTimeout(() => {
        if (markers.getLayers().length > 0 || trace.length > 0) {
            var bounds = markers.getBounds(); // Get bounds from markers

            // Ensure trace points are included in the bounds
            trace.forEach(point => {
                bounds.extend(point);
            });

            map.fitBounds(bounds.pad(0.1), { maxZoom: 15 });
        }
    }, 200); // Slightly longer delay to ensure all elements are fully loaded

</script>


{% endif %}

{% endblock %}