$.getJSON('/api/spots', function(jsonData) {
    let headers = Object.keys(jsonData[0]);
    let table = $('<table class="table table-striped table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
    ["Time", "DX", "Frequency", "Mode", "Comment", "Source", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));

    jsonData.forEach(row => {
      let $tr = $('<tr>');
      var time = moment(row["time"], moment.ISO_8601);
      var time_formatted = time.format("HH:mm")
      $tr.append(`<td>${time_formatted}</td>`);
      $tr.append(`<td>${row["dx_flag"]}&nbsp;${row["dx_call"]}</td>`);
      $tr.append(`<td>${row["freq"]}</td>`);
      $tr.append(`<td>${row["mode"]}</td>`);
      $tr.append('<td>' + escapeHtml(`${row["comment"]}`) + '</td>');
      $tr.append(`<td>${row["source"]}</td>`);
      $tr.append(`<td>${row["de_flag"]}&nbsp;${row["de_call"]}</td>`);
      table.find('tbody').append($tr);
    });

    $('#table-container').html(table);
});

function escapeHtml(str) {
  if (typeof str !== 'string') {
    return '';
  }

  const escapeCharacter = (match) => {
    switch (match) {
      case '&': return '&amp;';
      case '<': return '&lt;';
      case '>': return '&gt;';
      case '"': return '&quot;';
      case '\'': return '&#039;';
      case '`': return '&#096;';
      default: return match;
    }
  };

  return str.replace(/[&<>"'`]/g, escapeCharacter);
}