{% extends "base.html" %}

{% block head %}
<style>
 .progress { width: 100%; background-color: #ddd }
 .bar { height: 30px; background-color: #0066ff; text-align: center }
 td.state { width: 100px; }
</style>
<script src="webmacs:///js/vue.js"></script>
{% raw %}
<script>
 var app = null;
 window.onload = function() {
     app = new Vue({
         el: "#app",
         data: {
             downloads: []
         }
     });
 }
 function add_download(dl) {
     app.downloads.push(dl);
 }

 function download(id) {
     for (let dl of app.downloads) {
         if (dl.id == id) { return dl; }
     }
     return null;
 }

 function update_download(dl) {
     var index = app.downloads.indexOf(download(dl.id));
     if (index != -1) {
         Vue.set(app.downloads, index, dl);
     }
 }
</script>
{% endraw %}
{% endblock %}

{% block title %}Downloads{% endblock %}

{% block content %}

<table id="app">
  {% raw %}
  <tr v-for="download in downloads">
    <td v-if="download.isFinished" class="state">
      {{download.state}}
    </td>
    <td v-else class="state">
      <div class="progress">
        <div class="bar" v-bind:style="{width: download.progress + '%'}">{{download.progress}}%</div>
      </div>
    </td>
    <td>
      {{download.path}}
    </td>
  </tr>
  {% endraw %}
</table>
{% endblock %}