{% extends "base.html" %}

{% block content %}
<style>
    .btn-group-vertical{
        display: none!important;
    }
</style>
<div class="container-fluid h-100 mx-auto">
    <div class="row">
        <div class="col-sm-12  rounded text-center">
            <img src="static/img/arm80.png" alt="Automatic Ripping Machine">
            <p class="text-center">
                <strong>Welcome to your Automatic Ripping Machine<br></strong>
            </p>
        </div>
    </div>

    <div class="jumbotron mb-5">
        <div class="row h-100 mx-auto align-items-center">
            <div class="col-sm-12 mx-auto">
                <h5 class="text-center"><strong>These are the movies we tried to send to the ARM API</strong></h5>
            </div>
        </div>
        <div class="row">
            <div class="loading-spinner">
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status"><span class="sr-only"></span></div>
                    <div id="currentTotal"></div>
                </div>
            </div>
            <div class="col-md-12 mx-auto">
                <div class="card-deck">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript" src="static/js/common.js"></script>
<script type="text/javascript">
    let currentJob = 1;
    $(document).ready(function () {
        const jobItems = {{ job_list }};
        $.each(jobItems, function (index, jobId) {
            $("#currentTotal").html("<h3>Sending Job Progress: 0/" + jobItems.length + "</h3>");
            var jqxhr = $.get("/json", {mode: "send_item", job: jobId}, function (job) {
                console.log(job);
                $("#currentTotal").html("<h3>Sending Job Progress: " + currentJob + "/" + jobItems.length + "</h3>")
                $(".card-deck").prepend(addJobItem(job))
                if (job.error !== "") {
                    $(`#jobId${job.job_id}`).addClass("alert-danger")
                    $(`#jobId${job.job_id}_progress_section`).append("<strong>Failure Reason: </strong>" + job.error)
                } else {
                    $(`#jobId${job.job_id}`).addClass("alert-success")
                }
            })
                .fail(function () {
                    console.log("error");
                })
                .always(function () {
                    ++currentJob;
                    if (currentJob === jobItems.length) $(".loading-spinner").html("<h2 class='text-center'>Finished sending to API! Please check results below.</h2>")
                        .addClass("alert-info").parent().removeClass("row")
                });
        })
        activeTab("navsendmovies");
    });
</script>
{% endblock %}
{% block footer %}{{ super() }}{% endblock %}
{% block js %}
{{ super() }}
{% endblock %}