<div id="map" class="d-flex" style="min-height: 0; flex-grow: 1">

    <!-- Flight Display Sidebar -->
    {{> flights-sidebar }}

    <!-- The full-size sidebar -->
    {{> airport-sidebar }}

    <!-- Footer Group -->
    {{> footer}}

<script>
$(document).ready(async function() {

    airports = [];
    flights = [];

    await initialize();
    setInterval(
        async () => { 
            flights = await refreshFlights(filterName, filterCriteria); 
            updateAirportFlights(airports, flights, filterCriteria) 
        }, 60 * 1000);
    })

async function initialize()
{
    // Set-up airport only
    filterName = 'airport';
    filterCriteria = '{{ icao }}';

    await initializeMap();

    response = await fetchRetry('/livedata/airports.json');
    airports = await response.json();

    flights = await refreshFlights(filterName, filterCriteria);

    initializeAirport('{{ icao }}');
    initializeNexrad();
    await initializeATC();
    initializeAirports();
    refreshATC();   
    updateAirportFlights(airports, flights, filterCriteria);
}
</script>