{% extends 'front/base_front.html.twig' %}

{% block page_title %}Chelmiec{% endblock %}
{% block page_subtitle %}Strona główna{% endblock %}

{% block body_options %}class='pace-top'{% endblock %}

{% block body %}

        <section>
            <div class="row">
                <div class="col-6">

                {{ blend.nazwa }}

                <img src="{{ blend.foto }}" alt="" class="img-zoom img-fluid">


                </div>
                <div class="col-6">

                    <input type="text" id="text" name="text" placeholder="Twój tekst">

                <button id="render">Render</button>

                <div id="job"></div>

                </div>

            </div>
        </section>
        <!--/section-->

{% endblock %}

{% block js %}

    <script>
    function monitor(jobid){
        $.ajax({
            method: "POST",
            url: "{{ path('job_monitor') }}",
            data: {jobid: jobid ,}
        }).done(function(data){
            $('#job').html(data.info)
            if(data.complete==0) setTimeout(function() {monitor(jobid)},5000)
        });
    }

    $('#render').click(function(){
        $.ajax({
            method: "POST",
            url: "{{ path('new_job') }}",
            data: {
                blendid: {{ blend.id }},
                text: $('#text').val(),
            }
        }).done(function(data){
            $('#job').html(data.jobid)
            monitor(data.jobid)
        });
    })

    </script>

{% endblock %}