{{ 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>
	<p>
	    Please note that some adblockers may prevent the bookmarklet from opening the popup window.
	</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>
                        <a class="int-link" @click="show_popup(item)" href="#">
                          <span x-text="item.id">
                        </a>
                    </td>
                    <td>
                        <span x-show="item.files && item.files.length > 0">
                            <ul>
                                <template x-for="file in item.files">
                                    <li x-text="file"></li>
                                </template>
                            </ul>
                        </span>
                        <span x-show="! item.files || item.files.length == 0"
                              x-text="item.url">
                        </span>
                    </td>
                    <td><a class="int-link" x-bind:href="item.url">&#x1F517;</a></td>
                    <td :class="'state-'+item.state" x-text="item.state"></td>
                    <td x-text="item.percent"></td>
                    <td x-text="item.eta"></td>
                    <td x-text="item.finished ? '&#x2714;' : '-'"></td>
                </tr>

            </template>


        </tbody>
    </table>
</div>
{{ end }}

{{ define "js" }}
<script>
    function index() {
        return {
            items: [], version: {}, popups: {},
            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);
                })
            },
            show_popup(item) {
                // allegedly you can use the reference to pop the window to the front on subsequent
                // clicks, but I can't seem to find a reliable way to do so.
                this.popups[item.id] = window.open(item.popup_url, item.id, "width={{ .Config.UI.PopupWidth }},height={{ .Config.UI.PopupHeight }}");
            },
	    }
    }
</script>
{{ end }}