document.addEventListener('DOMContentLoaded', () => {
  let searchField = document.createElement('input')
  searchField.id = 'search-field'
  searchField.autofocus = true
  document.querySelector('body').insertBefore(searchField, document.querySelector('table'))

  const rows = [...document.querySelectorAll('tr.even, tr.odd')]

  pdLink = rows[0].querySelector('.indexcolname a')
  if (pdLink.innerText == 'Parent Directory') {
    pdLink.href = '../'
    pdLink.text = '..'
  }

  document.querySelector('#search-field').addEventListener("input", e => {
    const searchValue = e.target.value.toLowerCase()
    rows.forEach(row => {
      console.log(row)
      const file = row.querySelector('.indexcolname a').innerText
      if (!file.toLowerCase().startsWith(searchValue)) {
        row.style.display = 'none'
      } else {
        row.style.display = 'table-row'
      }
    })

    const visibleRows = [...document.querySelectorAll('tr[style="display: table-row;"]')]
    if (visibleRows.length === 1) {
      window.location = visibleRows[0].querySelector('td a').href
    }
  })
})