$(document).ready(async function() {
    await loadmovie();
});

async function loadmovie() {
    await $.get("/api/movies", rendermovie);
}

function rendermovie(movies) {
    
    movies.sort(function(a, b) {
        return a.title.localeCompare(b.title);
    });

    // movies.sort(function(a, b) {
    //     aJ = Date.parse(a.released);
    //     bJ = Date.parse(b.released);
    //     return bJ - aJ;
    // });


    movies.forEach(function(movie) {
        
        var row = document.createElement("div");
        row.className = "col";

        row.innerHTML = "<div class='card shadow-sm'>"+
                            "<img class='card-img-top' src="+ movie.webImg + " width='100%'>" +
                            "<div class='card-body'>" +
                                "<h5 class='card-title'>"+ movie.title + "</h5>" +
                                "<p class='card-text'>"+ movie.released + "</p>" +
                                // "<p class='card-text'>"+ movie.genre + "</p>" +
                            "</div>" +
                        "</div>";
   
    
        $("#movie_tbody").append(row);
    });
}