{{ define "content" }}

{{ template "menu.tmpl" . }}


<div x-data="index()" x-init="fetch_data(); fetch_version()">

    <p x-cloak x-show="version && version.upgrade_available">
        <a href="https://github.com/tardisx/gropple/releases">Upgrade is available</a> - 
        you have 
        <span x-text="version.current_version"></span> and 
        <span x-text="version.github_version"></span>
    is available.</p>

    <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>

    <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><a x-bind:href="item.url">link</a></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: [], version: {},
            fetch_version() {
                fetch('/rest/version')
                .then(response => response.json())
                .then(info => {
                    this.version = info;
                    setTimeout(() => { this.fetch_version() }, 1000 * 60 );
                })
                .catch(error => {
                    console.log('failed to fetch version info - will retry');
                    setTimeout(() => { this.fetch_version() }, 1000 );
                });
            },
            fetch_data() {
                fetch('/rest/fetch')
                .then(response => response.json())
                .then(info => {
                    // will be null if no downloads yet
                    if (info) {
                        this.items = info;
                    }
                    setTimeout(() => { this.fetch_data() }, 1000);
                })
            },
        }
    }
</script>
{{ end }}