{{ template "headersMenu.html" . }}

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            height: 80vh;
        }
        .leaflet-control-attribution,
        .leaflet-control-zoom {
            display: none;
        }
    </style>
    <div class="p-4 bg-white shadow">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-xl font-bold">DATAPOINT</h1>
                <input type="text" placeholder="Search anything" class="form-input">
            </div>
            <div class="flex items-center space-x-4">
                <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Import</button>
                <button class="px-4 py-2 font-bold text-gray-800 bg-gray-300 rounded hover:bg-gray-400">NR</button>
            </div>
        </div>
    </div>

    <div class="flex mt-4">
        <div id="map" class="flex-grow"></div>
        <div class="overflow-auto p-4 w-96 bg-white">
            <h2 class="text-lg font-bold">28 results</h2>
            <div class="mt-2 space-y-2">
                <!-- Dynamically generated list items would go here -->
                <p>Sample location data...</p>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([38.8048, -77.0469], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: ''
        }).addTo(map);

        // Sample markers
        var marker1 = L.marker([38.8048, -77.0469]).addTo(map);
        var marker2 = L.marker([38.8078, -77.0499]).addTo(map);
        // Add more markers as needed
    </script>

{{ template "footer.html" . }}