const content = document.querySelector('#content-page');
const nav = document.querySelector('#nav');

let pageIndex = 0; // Starts at page 0
let itemsPerPage = 2; // 2 items per page
loadItems() // Call the load items function

function loadItems() {
  // Clear any existing content
  content.innerHTML = "";
    // Loop set to start at pageIndex*itemsPerPage and finish after one itemsPerPage 
    for (i=pageIndex*itemsPerPage; i<((pageIndex*itemsPerPage)+itemsPerPage); i++) {
      // Write content into new element
      const item = document.createElement('div');
      item.innerHTML =  `
      <div>
        <img src="${items[i].src}" loading="lazy"/>
      </div>
      <div>
        <span>${items[i].desc}</span>
      </div>
      `
      // Append to the DOM when finished
      content.append(item);
  }
  loadPageNav() // Update page navigation after new items are loaded
}

function loadPageNav() {
  // Clear nav content before updating
  nav.innerHTML = "";
  for (i=0; i<(items.length/itemsPerPage); i++) {
    // Create span for each page value
    let span = document.createElement('span');
    span.innerHTML = i+1;
    // Add event listener to each that will update pageIndex and then call loadItems
    span.addEventListener('click', (e) => {
      pageIndex = e.target.innerHTML-1;
      loadItems();
    });
    // Add styling if current page in navigation
    if (i === pageIndex) {
      span.style.fontSize = "1.7rem";
    }
    // Append each span inside navigation elements
    nav.append(span);
  }
}