<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}}
</div>
<script>
$(document).ready(async function() {

    airports = [];
    flights = [];
    manual = false;

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

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

    await initializeMap(false);

    response = await fetchRetry('/livedata/airports.json');
    airports = await response.json();
    flights = await refreshFlights(filterName, filterCriteria);
    eventsByAirport = await loadUpcomingEvents();

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