$(document).ready(function () {
    $("a.nav-link").click(function () {
        $("a.nav-link").removeClass("active");
        $(this).addClass("active");
    });

    $(window).load(function () {
        fetch('http://127.0.0.1:5000/jobs')
            .then(res => res.json())
            .then(data => {
                jobs = data.jobs;
                for (var i = 0; i < jobs.length; i++) {
                    html = `<div class="job">
                    <h4 class="job-title font-weight-bold">${jobs[i].title}<span class="company-name font-weight-normal"> | ${jobs[i].company}</span></h4>
                    <h6 class="meta"><span class="location">${jobs[i].location}</span> | <span class="source"><a href="${jobs[i].source_link}" target="_blank">${jobs[i].source}</a></span>
                    </h6>
                    <a class="apply" href="${jobs[i].link}" target="_blank">Apply</a>
                    <!--<div class="tags">-->
                        <!--<a class="tag-link" href="#">JavaScript</a>-->
                        <!--<a class="tag-link" href="#">Software</a>-->
                        <!--<a class="tag-link" href="#">Python</a>-->
                        <!--<a class="tag-link" href="#">API</a>-->
                        <!--<a class="tag-link" href="#">NodeJS</a>-->
                    <!--</div>-->
                </div>`;
                    $("#job-listing").append(html);
                }
            })
            .catch(error => console.log(error))
    });
});