// TODO animate label below

setTimeout(function () {

    const autofilledInput = document.querySelectorAll('input:-webkit-autofill')
    const inputs = document.querySelectorAll('input')
    const selects = document.querySelectorAll('select')
    const passwords = document.querySelectorAll('input[type=password]')

    if (autofilledInput.length) {
        for (var i = 0, len = autofilledInput.length; i < len; i++) {
            autofilledInput[i].parentNode.parentNode.classList.add('focused')
        }
    }

    if (inputs.length) {
        for (var i = 0, len = inputs.length; i < len; i++) {
            if (inputs[i].getAttribute('placeholder')) {
                inputs[i].parentNode.parentNode.classList.add('focused')
            }

            inputs[i].addEventListener('blur', function(e) {
                let $this = this
                let timeout = this.classList.contains('_has-datepicker') ? 300 : 0
                setTimeout(function () {
                    if ($this.getAttribute('placeholder')) {
                        $this.parentNode.parentNode.classList.add('focused')
                    }
                }, timeout)
            })
        }
    }

    if (selects.length) {
        for (var i = 0, len = selects.length; i < len; i++) {
            if (selects[i].value === selects[i].querySelector('option').value) {
                selects[i].parentNode.parentNode.classList.add('focused')
            }
        }
    }

    if (passwords.length) {
        for (var i = 0; i < passwords.length; i++) {
            let button = document.createElement('button')
            button.type = 'button'
            button.className = 'password-toggle'
            button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4,8.7c-2-2-4.6-3.1-7.4-3.1S6.5,6.7,4.6,8.7c-1.6,1.6-2.9,2.9-2.9,2.9c-0.2,0.2-0.2,0.5,0,0.7c0,0,1.3,1.3,2.9,2.9c2,2,4.6,3.1,7.4,3.1s5.5-1.1,7.4-3.1c1.6-1.6,2.9-2.9,2.9-2.9c0.2-0.2,0.2-0.5,0-0.7C22.4,11.6,21.1,10.4,19.4,8.7z M18.7,9.4l2.6,2.6l-2.6,2.6c-1.8,1.8-4.2,2.8-6.7,2.8s-4.9-1-6.7-2.8L2.7,12l2.6-2.6C7.1,7.6,9.5,6.6,12,6.6S16.9,7.6,18.7,9.4z"/><path d="M12,8.5c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5S13.9,8.5,12,8.5z"/></svg>'
            button.addEventListener('click', function () {
                if (this.classList.contains('-show')) {
                    this.classList.remove('-show')
                    this.parentNode.getElementsByTagName('input')[0].type = 'password'
                    this.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4,8.7c-2-2-4.6-3.1-7.4-3.1S6.5,6.7,4.6,8.7c-1.6,1.6-2.9,2.9-2.9,2.9c-0.2,0.2-0.2,0.5,0,0.7c0,0,1.3,1.3,2.9,2.9c2,2,4.6,3.1,7.4,3.1s5.5-1.1,7.4-3.1c1.6-1.6,2.9-2.9,2.9-2.9c0.2-0.2,0.2-0.5,0-0.7C22.4,11.6,21.1,10.4,19.4,8.7z M18.7,9.4l2.6,2.6l-2.6,2.6c-1.8,1.8-4.2,2.8-6.7,2.8s-4.9-1-6.7-2.8L2.7,12l2.6-2.6C7.1,7.6,9.5,6.6,12,6.6S16.9,7.6,18.7,9.4z"/><path d="M12,8.5c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5S13.9,8.5,12,8.5z"/></svg>'
                } else {
                    this.classList.add('-show')
                    this.parentNode.getElementsByTagName('input')[0].type = 'text'
                    this.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M22.4,11.7c0,0-1.3-1.3-2.9-2.9c-2-2-4.6-3.1-7.4-3.1c-0.5,0-1.1,0-1.6,0.1c-0.3,0-0.5,0.3-0.4,0.6c0,0.3,0.3,0.5,0.6,0.4c0.5-0.1,0.9-0.1,1.4-0.1c2.5,0,4.9,1,6.7,2.8l2.6,2.6l-2.6,2.6c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c1.6-1.6,2.9-2.9,2.9-2.9C22.6,12.2,22.6,11.9,22.4,11.7z"/><path d="M3.4,2.7c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l3.9,3.9c-0.7,0.4-1.4,0.9-2,1.5c-1.6,1.6-2.9,2.9-2.9,2.9c-0.2,0.2-0.2,0.5,0,0.7c0,0,1.3,1.3,2.9,2.9c2,2,4.6,3.1,7.4,3.1c1.6,0,3.2-0.4,4.6-1.1l4.1,4.1c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7L3.4,2.7z M12,17.4c-2.5,0-4.9-1-6.7-2.8L2.7,12l2.6-2.6c0.6-0.6,1.3-1.1,2-1.5l2,2c-0.4,0.6-0.7,1.3-0.7,2.1c0,1.9,1.6,3.5,3.5,3.5c0.8,0,1.5-0.3,2.1-0.7l1.7,1.7C14.7,17.1,13.4,17.4,12,17.4z"/></svg>'
                }
            })
            passwords[i].parentNode.insertBefore(button, passwords[i].nextSibling)
        }
    }

}, 2000)