{{ define "content" }}
    <div id="layout" class="pure-g pure-u-1">
        <p>Fetching <tt>{{ .Url }}</tt></p>
        <table class="pure-table" x-data="popup()"  x-init="fetch_data()">
            <tr><th>current filename</th><td x-text="filename"></td></tr>
            <tr><th>state</th><td x-text="state"></td></tr>
            <tr><th>progress</th><td x-text="percent"></td></tr>
            <tr><th>ETA</th><td x-text="eta"></td></tr>
        </table>
        <p><a href="/" target="_gropple_status">Status page</a> </p>
    </div>
{{ end }}
{{ define "js" }}
<script>
    function popup() {
        return { 
            eta: '', percent: 0.0, state: '??', filename: '', finished: false,
            fetch_data() {
                fetch('/fetch/info/{{ .Id }}')
                .then(response => response.json())
                .then(info => {
                    this.eta = info.eta;
                    this.percent = info.percent + "%";
                    this.state = info.state;
                    this.finished = info.finished;
                    if (info.files && info.files.length > 0) {
                        this.filename = info.files[info.files.length - 1];
                    }
                    console.log('finish?', this.finished);
                    if (! this.finished) {
                        setTimeout(() => { this.fetch_data() }, 100);
                    }
                });
            },
        }
    }
</script>
{{ end }}