{{ define "content" }}
<div>
<p>
    Drag this bookmarklet: <a href="{{ .BookmarkletURL }}">Gropple</a> to your bookmark bar, and click it
    on any page you want to grab the video from.
</p>
</div>

<div x-data="index()" x-init="fetch_data()">
    <table class="pure-table">
        <thead>
            <tr>
                <th>id</th><th>filename</th><th>url</th><th>state</th><th>percent</th><th>eta</th><th>finished</th>
            </tr>
        </thead>
        <tbody>
            <template x-for="item in items">
                <tr>
                    <td x-text="item.id"></td>
                    <td x-text="item.files"></td>
                    <td x-text="item.url"></td>
                    <td x-text="item.state"></td>
                    <td x-text="item.percent"></td>
                    <td x-text="item.eta"></td>
                    <td x-text="item.finished"></td>
                </tr>
    
            </template>
              

            {{ range $k, $v := .Downloads }}
            {{ end }}
        </tbody>  
    </table>
</div>
{{ end }}

{{ define "js" }}
<script>
    function index() {
        return { 
            items: [],
            fetch_data() {
                fetch('/fetch/info')
                .then(response => response.json())
                .then(info => {
                    this.items = info;
                    setTimeout(() => { this.fetch_data() }, 1000);
                })
            },
        }
    }
</script>
{{ end }}