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@v14/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);
      });
    }
  });