{% extends 'layout.html' %}

{% block body %}
<div class="container" style="text-align:center; width: 100%">
<br>
  {% if media_url: %}
    <video width="1280" height="720" controls>
    <source src="{{media_url}}" type="video/mp4">
    Your browser does not support the video tag.
    </video>
  {% elif job_status == 'Running': %}
    <div style="width: 100%; height: 720px; position: relative; background: black; text-align: center; color: white;">
      <img src="/static/images/gears.png" style="vertical-align: middle; width: auto; height: auto; position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;">
        <span style="height: auto; position:absolute; margin: auto; top: 58%; left: 0; right: 0; color: white; width: 60%">
          <progress class="progress is-primary" value="{{job.percent_complete() * 100}}" max="100" style="margin-top: 6px;" id="progress-bar">Rendering</progress>
          Rendering in Progress - <span id="percent-complete">{{(job.percent_complete() * 100) | int}}%</span>
          <br>Time Elapsed: <span id="time-elapsed">{{job.time_elapsed()}}</span>
        </span>
      <script>
      var startingStatus = '{{job.render_status().value}}';
      function update_job() {
        $.getJSON('/api/job/{{job.id}}', function(data) {
          document.getElementById('progress-bar').value = (data.percent_complete * 100);
          document.getElementById('percent-complete').innerHTML = (data.percent_complete * 100).toFixed(0) + '%';
          document.getElementById('time-elapsed').innerHTML = data.time_elapsed;
          if (data.status != startingStatus){
            clearInterval(renderingTimer);
            window.location.reload(true);
          };
        });
      }
      if (startingStatus == 'running'){
        var renderingTimer = setInterval(update_job, 1000);
      };
    </script>
    </div>
  {% else %}
    <div style="width: 100%; height: 720px; position: relative; background: black;">
      <img src="/static/images/{{job_status}}.png" style="vertical-align: middle; width: auto; height: auto; position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;">
      <span style="height: auto; position:absolute; margin: auto; top: 58%; left: 0; right: 0; color: white;">
        {{job_status}}
      </span>
    </div>
  {% endif %}
  <br>
  {{detail_table|safe}}
</div>
{% endblock %}