addEventListener('DOMContentLoaded', () => {
  // show password while user holds button
  const showPswdBtns = document.getElementsByClassName('show-pswd')
  for (let el of showPswdBtns) {
    const inp = document.getElementById(el.dataset.input)
    el.addEventListener('mousedown', () => inp.type = 'text')
    el.addEventListener('mouseup', () => inp.type = 'password')
  }

  // add file input by cloning #file-tmpl-js (see index.hbs)
  const filesContainer = document.querySelector('#tab-file>.form-main')
  const fileTemplate = document.querySelector('#file-tmpl-js>div')
  document.getElementById('add-file').addEventListener('click', () => {
    filesContainer.append(fileTemplate.cloneNode(true))
  })

  // make tabs usable from keyboard:
  // when focused on label, space or enter triggers
  // click on hidden input[type=radio]
  const tabLabels = document.querySelectorAll('header>label')
  for (let el of tabLabels) {
    const inp = document.getElementById(el.htmlFor)
    el.addEventListener('keyup', (ev) => {
      if (ev.key == " " || ev.key == "Enter") {
        inp.click()
      }
    })
  }
})