{% if site.use_thebelab_button -%}
<script>
/**
 * Set up thebelab button for code blocks
 */

const thebelabCellButton = id =>
  `<a id="thebelab-cell-button-${id}" class="btn thebebtn o-tooltip--left" data-tooltip="Interactive Mode">
    <img src="{{ site.images_url | relative_url }}/edit-button.svg" alt="Start thebelab interactive mode">
  </a>`


const addThebelabButtonToCodeCells =  () => {

  const codeCells = document.querySelectorAll('div.input_area > div.highlight:not(.output) pre')
  codeCells.forEach((codeCell, index) => {
    const id = codeCellId(index)
    codeCell.setAttribute('id', id)
    if (document.getElementById("thebelab-cell-button-" + id) == null) {
      codeCell.insertAdjacentHTML('afterend', thebelabCellButton(id));
    }
  })
}

initFunction(addThebelabButtonToCodeCells);
</script>
{% endif %}