// The DOMContentLoaded event fires when the initial HTML
// document has been completely loaded and parsed, without
// waiting for stylesheets, images, and subframes to finish loading.
document.addEventListener('DOMContentLoaded', (_event) => {
  const references = document.getElementsByClassName('footnote-reference')
  // For each footnote reference, set an id so we can refer to it from the definition.
  // If the definition had an id of 'some_id', then the reference has id `some_id_ref`.
  for (const reference of references) {
    const link = reference.firstChild
    const id = link.getAttribute('href').slice(1) // skip the '#'
    link.setAttribute('id', `${id}_ref`)
  }

  const footnotes = document.getElementsByClassName('footnote-definition-label')
  // For each footnote-definition, add an anchor element with an href to its corresponding reference.
  // The text used for the added anchor is 'Leftwards Arrow with Hook' (U+21A9).
  for (const footnote of footnotes) {
      const pid = footnote.parentElement.getAttribute('id')
      const num = footnote.textContent;
      footnote.textContent = '';

      const backReference = document.createElement('a')
      backReference.setAttribute('href', `#${pid}_ref`)
      backReference.textContent = `${num} ⬑`
      footnote.append(backReference)
  }
});