document.addEventListener('DOMContentLoaded', function() {
    function label(element, value) {
        if(element.hasAttribute('value')) {
            if(value !== undefined) {
                element.setAttribute('value', value)
            } else {
                return element.getAttribute('value')
            }
        } else {
            if(value !== undefined) {
                element.textContent = value
            } else {
                return element.textContent
            }
        }
    }

    function countdownDeleteButton(event) {
        const btn = event.target
        const countdown = btn.getAttribute('data-countdown')

        if(countdown !== '1') {
            event.preventDefault()
            btn.classList.add('__on-countdown')

            const hasCountdown = countdown !== null
            const newCountdown = hasCountdown ? countdown - 1 : 3

            if(!hasCountdown) {
                btn.setAttribute('data-label', label(btn))
            }

            label(btn, newCountdown)
            btn.setAttribute('data-countdown', newCountdown)
            setTimeout(countdownDeleteButton, 1000, event)
        } else {
            label(btn, btn.getAttribute('data-label'))
        }
    }

    document.querySelectorAll('.delete-btn').forEach(function(btn) {
        btn.addEventListener('click', countdownDeleteButton)
    })

    function dynamicTables() {
        const range = (x,y) =>
              x > y ? [] : [x, ...range(x + 1, y)];

        const pageSize = 50
        const colsFromThead = thead =>
              [...thead.children[0].children].map(th => th.innerText)
        const visibleRows = page =>
              range(page * pageSize, (page + 1) * pageSize - 1)

        document.querySelectorAll('table').forEach(function(tbl) {
            const thead = tbl.tHead
            const tbody = tbl.tBodies[0]
            const cols = colsFromThead(thead)
            const rows = [...tbl.rows]
            let page = 0
            console.debug(visibleRows(1))
        })
    }
    dynamicTables()
})

/*
  $(document).ready(function() {
  $('table').DataTable({
  stateSave: true,
  fixedHeader: true,
  lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
  stateSaveCallback: function(settings,data) {
  localStorage.setItem('DataTables', JSON.stringify(data))
  },
  stateLoadCallback: function(settings) {
  return JSON.parse(localStorage.getItem('DataTables'))
  }
  })
  })
*/