html`
<style>
body {
  font-family: Schroders Circular !important;
  font-size: 16px !important;
}
h2 {
  font-size: 28px !important;
}
h3 {
  font-size: 24px !important;
}
range:disabled {
  color: darkgrey;            /* Set the text color to light grey */
  background-color: darkgrey; /* Set the background color to dark grey */
  cursor: not-allowed;        /* Make the cursor appear as 'disabled' */
  opacity: 0.6;               /* Slightly reduce the opacity for a more 'disabled' feel */
}
div.observablehq th {
  background-color: rgba(0,42,94,1) !important;
  color: rgba(255,255,255,1) !important;
}
.observablehq table {
  font-size: 0.9em !important;
}
table {
  width: 100% !important;
}
th {
  white-space: unset !important;
}
td {
  white-space: unset !important;
}
tr:nth-child(even) {
  background-color: #e0e0e0;
}
.tick {
font-size: 16px;
}
</style>
`

container = {
  let x = d3.create("div")
  x.attr("style", `width:100%; margin-right:50px; aspect-ratio: 3 / 2; max-height: 900px;`);
  return x.node();
}


lsoa_map = {
  let map = L.map(container, {
    zoomSnap: 0,    // Enable fractional zooming
    zoomDelta: 0.25 // Allow zoom increments of 0.25
  });   

  map.createPane('labels');
  map.getPane('labels').style.zIndex = 650; // Higher zIndex to make sure labels are on top
  map.getPane('tooltipPane').style.zIndex = 700; // Tooltip on top of everything


  // CartoDB Positron No-Labels (basemap)
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: 'abcd',
    maxZoom: 20
  }).addTo(map);

  // CartoDB Positron Labels-Only (labels overlay)
  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://carto.com/attributions">CARTO</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      subdomains: 'abcd',
      maxZoom: 20,
      pane: 'labels' // Add the labels layer to the custom pane
  }).addTo(map);

  return map;
};

opac = 0.8;

railcolour = "#00796D"

styles = ({
  railways:  {
    weight: 1,
    color: railcolour,
    opacity: 1
  },
   stations: {
    radius: 3,
    weight: 1,
    fillColor: railcolour,
    fillOpacity: opac,
    color: "rgb(255,255,255)",
    opacity: opac
  },
  highlighted_stations: {
    radius: 4,
    weight: 1,
    fillColor: 'rgb(25,25,25)',
    fillOpacity: opac,
    color: "rgb(255,255,255)",
    opacity: opac
  },
  choropleth: {
    weight: 1,
    color: "red",
    opactiy: opac,
    fillColor:"red",
    fillOpacity: opac,
  },
  highlight: {
    weight: 1.5,
    fillColor: "#35e6ab",
    fillOpacity: opac,
    color: "#5e5e5e",
    opacity: opac
  },
  select: {
    weight: 2,
    fillColor: "#e69035",
    fillOpacity: opac,
    color: "#5e5e5e",
    opacity: opac
  }
});

current_bounds = bound_options[commute_mode.value];

function formatPrice(value) {
return value ? `£${Math.round(value).toLocaleString()}` : 'N/A';
}
  
function updateMap(_map_, layerOrder, optional_layers_selected, highlight_stations) {  
  console.log("Update Map Triggered")
 
  for (const [layerName, layer] of Object.entries(all_optional_layers)) {  
      console.log("Removing: ",layerName)
      removeExistingLayer(_map_, layerName)
  }  
  
  for (const layerName of layerOrder) {  
    if (optional_layers_selected.includes(layerName)) {  
      const layer = all_optional_layers[layerName];  
      _map_.addLayer(layer);  
    }  
  }  
  if (_map_.legendControl) {
    _map_.removeControl(_map_.legendControl);
  }
  let legend = makeLegend(analysis, optional_layers_selected);
  
  if (legend) {
    legend.addTo(_map_);
    _map_.legendControl = legend;
  }
  console.log("---------------")
  console.log("Update Complete")
  console.log("---------------")
  return 1;  
}

function countLayers(map) {  
  let layerCount = 0;  
  map.eachLayer(function(layer) {  
    layerCount++;  
  });  
  return layerCount;  
}
 
function removeExistingLayer(map, layer_name) {    
  map.eachLayer(function(layer) {    
    if (layer.options && layer.options.name === layer_name) {    
      map.removeLayer(layer);    
    }    
  });    
};

mutable cached_lsoa_data = null;

async function loadAndFilterLSOA(commute_mode, analysis, budget, housing_type, children, selected_lsoa) {

  // Color Variable - i.e. which column to plot the values of as the choropleth map
  let colorvar = housing_type.value + '_gross_pp_req' + '_' + children.value + '_kid_' + hhld.value + '_hhld';

  // On Mouseover, colour this feature as highlighted
  const highlightFeature = (e) => {
    e.target.setStyle(styles.highlight); 
    e.target.openTooltip();
  };

  // On Mouseover, colour this feature as basic style - UNLESS it is already the selected feature
  const resetHighlight = (e) => { 
    let q = (e.target.feature.properties["lsoa11cd"] == selected_lsoa) ? styles.select : styleFunction(e.target.feature, colorvar);
    e.target.setStyle(q);
    e.target.closeTooltip(); 
  };

  // On Click, toggle selection of the feature
  const toggleFeature = (e) => {
    if (e.target.feature.properties["lsoa11cd"] == selected_lsoa) {
      e.target.setStyle(styles.choropleth);
      mutable selected_lsoa = 'All';
    } else {
      e.target.setStyle(styles.select);
      mutable selected_lsoa = String(e.target.feature.properties["lsoa11cd"]);
    }
  };

  const onEachFeature = (feature, layer) => {
    let formatted_colorvar = analysis === 'Best Housing Affordable' ? housing_types_numeric_converter[feature.properties[colorvar]] : formatPrice(feature.properties[colorvar]);

    let tooltipContent = `
    <strong style="font-size: 1.2em; color: rgb(0,42,94);">${analysis} per Earner:<br>${formatted_colorvar || 'N/A'}</strong><br>
    <br>
    <strong style="font-size: 1.2em; color: rgb(0,42,94);">Location</strong><br>
    <strong>LSOA Name:</strong> ${feature.properties['lsoa11nm'] || 'N/A'}<br>
    <strong>Local Authority:</strong> ${feature.properties['lad24nm'] || 'N/A'}<br>
    <br>
    <strong style="font-size: 1.2em; color: rgb(0,42,94);">Commuting</strong><br>

    ${feature.properties['tfl'] !== 1 ? `
    <strong>Best Station:</strong> ${feature.properties['stationname'] || 'N/A'}<br>
    <strong>Drive to Station:</strong> ${Math.round(feature.properties['tt_drive_time'], 0) || 'N/A'} minutes<br>
    <strong>Outbound Train Time:</strong> ${Math.round(feature.properties['tt_outbound'], 0) || 'N/A'} minutes<br>
    <strong>Inbound Train Time:</strong> ${Math.round(feature.properties['tt_inbound'], 0) || 'N/A'} minutes<br>` : ''}

    <strong>Best Commute Method:</strong> ${feature.properties['best_commute_method'] || 'N/A'}<br>
    <strong>Monthly Commute Costs:</strong> £${feature.properties[`monthly_pp_commute_cost_${hhld.value}_hhld`] ? Math.round(feature.properties[`monthly_pp_commute_cost_${hhld.value}_hhld`]).toLocaleString() : 'N/A'}<br>
    <br>
    <strong style="font-size: 1.2em; color: rgb(0,42,94);">Shelter Costs</strong><br>
    <strong>${housing_type.label}:</strong> ${formatPrice(feature.properties[`${housing_type.value}_average_price`])}<br>
    <br>
    <strong style="font-size: 1.2em; color: rgb(0,42,94);">Education Outcomes</strong><br>
    <strong>Primary:</strong> ${Math.round(feature.properties['primary'])}%<br>
    <strong>Secondary:</strong> ${Math.round(feature.properties['secondary'])}%<br>
    <strong>6th Form:</strong> ${Math.round(feature.properties['tertiary'])}%<br>
    `;

    layer.bindTooltip(tooltipContent);  

    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: toggleFeature,
    });
    layer.bringToBack(); // Ensure this layer is on top
  };

  // Check if we have already labeloaded the data, and cache it if not;
  if (!cached_lsoa_data) {
    console.log('**** ------> LOADING LSOA Data ****');
    mutable cached_lsoa_data = await d3.json(urls['lsoa_layer']);
  } else {
    console.log('#### Using Cached LSOA Data ####');
  }

  // Filter Data  
  console.log('Filtering...');
  let lsoa_short = {      
    ...cached_lsoa_data,      
    features: cached_lsoa_data.features.filter(p2 => p2.properties.tt_category == commute_mode.value)
  };

  // Define Layer
  let lsoa_layer = L.geoJSON(lsoa_short, { 
    style: function(feature) { return styleFunction(feature, colorvar); },
    onEachFeature: onEachFeature,
    name: 'LSOA Layer' 
  });

  return lsoa_layer;  
}

async function triggerUpdate(lsoa_map, commute_mode, analysis, budget, housing_type, children, selected_lsoa) {

  // Generate new LSOA layer
  const lsoa_layer = await loadAndFilterLSOA(commute_mode, analysis, budget, housing_type, children, selected_lsoa);
  console.log("LSOA Layer Triggered");
  
  if (lsoa_layer) {    
    console.log("Adding LSOA Layer...");  
    all_optional_layers["LSOA Layer"] = lsoa_layer;
  }      

  // Generate new station layer
  // Stations - Add to Map
  const station_layer = await loadAndFilterStations(commute_mode, {}, null).then(station_layer => {      
  console.log("Stations Triggered")
  if (station_layer) {           
      all_optional_layers["Stations"] = station_layer;      
    }      
  });  

  let update_response = updateMap(lsoa_map, layerOrder, optional_layers_selected, highlight_stations);

  // Assign trigger
  lsoa_layer.on("click", (e) => { mutable trigger += 1; });
}

blpu = ['#edf8fb','#bfd3e6','#9ebcda','#8c96c6','#8856a7','#810f7c'];

async function loadTableData(
    commute_mode_t10,
    housing_type_t10,
    children_t10,
    hhld_t10,
    budget_t10,
    filter_affordability,
    order_by
) {

    // Create the 'budget_field' dynamically
    let budget_field = `${housing_type_t10.value}_gross_pp_req_${children_t10.value}_kid_${hhld_t10.value}_hhld`;

    // Check if we have already labeloaded the data, and cache it if not;
    if (!cached_lsoa_data) {
      console.log('**** ------> LOADING LSOA Data ****');
      mutable cached_lsoa_data = await d3.json(urls['lsoa_layer']);
    } else {
      console.log('#### Using Cached LSOA Data ####');
    }
    
    // Ensure that budget_field exists
    if (!cached_lsoa_data.features[0].properties.hasOwnProperty(budget_field)) {
        console.error(`Error: ${budget_field} does not exist in the dataset.`);
        return [];
    }

    // List of desired properties
    const selectedProperties = [
        'tt_category',
        'stationname',
        'primary',
        'secondary', 
        'tertiary',
        `${housing_type_t10.value}_average_price`,
        'avg_train_journey_mins',
        budget_field
    ]; 

    let cached_lsoa_data_ = cached_lsoa_data['features'].map(r => {
        let subset = {};
        selectedProperties.forEach(prop => {
            subset[prop] = r.properties[prop]; // Copy only the selected properties
        });
        return subset;
    });

    const outcols = [
        'stationname',
        'primary', 'secondary', 'tertiary',
        `${housing_type_t10.value}_average_price`,
        'avg_train_journey_mins',
    ];

    let ecsch = cached_lsoa_data_
    .filter(row => {
            // Drop rows with null or undefined values in any of the specified columns
            return outcols.every(col => row[col] !== null && row[col] !== undefined);
        })
    .filter(row => row.tt_category === commute_mode_t10.value) // Filter by commute mode
    .filter(row => filter_affordability.value !== 1 || row[budget_field] < budget_t10) // Filter by affordability if required
    .map(row => ({
        ...row,
        income_per_earner: row[budget_field] // Add 'income_per_earner' field
    }))
    .sort((a, b) => {
        // Sort by 'stationname' first, then by 'income_per_earner' if stationnames are the same
        if (a.stationname === b.stationname) {
            return a.income_per_earner - b.income_per_earner;
        }
        return a.stationname.localeCompare(b.stationname);
    });

    // Group by 'stationname' and take the first row for each group
    let groupedEcsch = [];
    let stationNames = new Set();  // Set to track which station names have been processed
    ecsch.forEach(row => {
        if (!stationNames.has(row.stationname)) {
            groupedEcsch.push(row);  // Add the first occurrence
            stationNames.add(row.stationname);
        }
    });

    let gecsch = groupedEcsch;

    // Sort by order_by.value in descending order
    gecsch = gecsch.sort((a, b) => b[order_by.value] - a[order_by.value]);

    let outframe = gecsch
        .filter(row => {
            // Drop rows with null or undefined values in any of the specified columns
            return outcols.every(col => row[col] !== null && row[col] !== undefined);
        })
        .map((row, index) => {
            // Add the rank column based on the order of rows
            row['rank'] = index + 1; // Assign rank starting from 1
            return row;
        });

    return outframe;
}

function makeRankTable(frame,
                       housing_type_t10) {

  let t = Inputs.table(frame, {
    columns: [
      "rank",
      "stationname",
      'primary', 
      'secondary', 
      'tertiary',
      housing_type_t10.value+"_average_price",
      'avg_train_journey_mins', 
      'income_per_earner',
    ],
    header: {
      rank: "Rank",
      stationname: "Station",
      primary: "Primary Score",
      secondary: "Secondary Score",
      tertiary: "Sixth Form Score",
      [housing_type_t10.value+"_average_price"]: "Avg. "+housing_type_t10.label+" Price",
      avg_train_journey_mins: "Avg. Travel Time From Station to Piccadilly Circus",
      income_per_earner: "Minimum Gross Income Required per Earner"
    },
    layout: "fixed",
    width: "100%",
    maxWidth: "100%",
    selectable: false,
    select: false,
    format: {
      rank: x => String(x),
      primary: x => x.toFixed(1),
      secondary: x => x.toFixed(1),
      tertiary: x => x.toFixed(1),
      [housing_type_t10.value+"_average_price"]: x => formatPrice(x),
      avg_train_journey_mins: x => x.toFixed(0),
      income_per_earner: x => formatPrice(x)
    },
    align: {
      rank: "left"
    }
  })

  return t;
}

frame = loadTableData(commute_mode_t10,
                      housing_type_t10,
                      children_t10,
                      hhld_t10,
                      budget_t10,
                      filter_affordability,
                      order_by
);

viewof search = Inputs.search(frame, {label: "Filter for Station:"});

makeRankTable(search,
              housing_type_t10);