let jobsContainer = document.getElementById("jobsContainer")

fetch('/json/jobs.json')
  .then((response) => response.json())
  .then((json) => {
    if(json.length <= 0) {
      const jobContainer = document.createElement("div");
      jobContainer.classList.add("flex-auto");
      jobContainer.appendChild(document.createElement("h2")).innerHTML = "There are currently no open jobs to apply for"
      jobContainer.appendChild(document.createElement("p")).innerHTML = "Please try again to a different time"

      jobsContainer.appendChild(jobContainer);
    } else {
      json.forEach((job) => {
        const jobContainer = document.createElement("div");
        jobContainer.classList.add("flex-auto");
  
        const jobTitle = document.createElement("h2");
        jobTitle.innerHTML = job.title;
        jobContainer.appendChild(jobTitle)
        if(job.sub.length > 0) {
          const jobIcons = document.createElement("div");
          jobIcons.classList.add("flex", "flex-row", "text-2xl");
          job.sub.forEach((icon) => {
            let iconObject
            switch(icon.source) {
              case "mdi":
                iconObject = document.createElement("span");
                iconObject.classList.add("iconify");
                iconObject.setAttribute("data-icon", "mdi-"+icon.icon+"");
                break;
                case "simpleicons":
                  iconObject = document.createElement("span");
                  iconObject.classList.add("icon");
                  const iconImg = document.createElement("img");
                  iconImg.height = 20;
                  iconImg.width = 20;
                  iconImg.src = "https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/"+icon.icon+".svg"
                  iconObject.appendChild(iconImg);
                  break;
            }
            jobIcons.appendChild(iconObject);
          });
          jobContainer.appendChild(jobIcons);
        }
  
        const jobDescription = document.createElement("p");
        jobDescription.innerHTML = job.description;
        jobContainer.appendChild(jobDescription);
  
        const applyButton = document.createElement("button");
        applyButton.type = "button"
        applyButton.classList.add("text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-sm", "px-5", "py-2.5", "text-center", "me-2", "mb-2", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800", "max-w-2xs");
        applyButton.addEventListener("click", () => {
          openApplyForm(job.title)
        })
        applyButton.innerHTML = "Apply"
        
        jobsContainer.appendChild(jobContainer)
        jobsContainer.appendChild(applyButton)
      });
    }
});