// javascript
var i = 0
const gallery = document.querySelectorAll('.card')
const next = document.querySelector('.next')
const prev = document.querySelector('.previous')

init()

function init() {
    next.addEventListener('click', handleNextClick)
    prev.addEventListener('click', handlePrevClick)
}

function updateArrows() {
    next.classList.remove('nope')
    prev.classList.remove('nope')
    
    if (i === 0) {
        prev.classList.add('nope')
    } else if (i === gallery.length - 1) {
        next.classList.add('nope')
    }
}

function setCurrent() {
    for (let c=0; c < gallery.length; c++) {
        console.log(c)
        gallery[c].classList.remove('current')
    }
    gallery[i].classList.add('current')
    updateArrows()
    console.log(gallery[i])
}

function handleNextClick() {
    ++i
    if (i >= gallery.length - 1) {
        i = gallery.length - 1
    }
    setCurrent()
    console.log(`next: ${i}`)
}

function handlePrevClick() {
    --i
    if (i < 0) {
        i = 0
    }
    setCurrent()
    console.log(`prev: ${i}`)
}