{{ define "content" }}
    <div id="layout" class="pure-g pure-u-1" x-data="popup()" x-init="fetch_data()">
        <h2>Download started</h2>
        <p>Fetching <tt>{{ .dl.Url }}</tt></p>
        <table class="pure-table" >
            <tr>
                <th>profile</th>
                <td>
                    <select x-bind:disabled="profile_chosen" x-on:change="update_profile()" class="pure-input-1-2" x-model="profile_chosen">
                        <option value="">choose a profile to start</option>
                    {{ range $i := .config.DownloadProfiles }}
                        <option>{{ $i.Name }}</option>
                    {{ end }}
                    </select>
                </td>
            </tr>
            <tr><th>current filename</th><td x-text="filename"></td></tr>
            <tr>
                <th>destination</th>
                <td>
                    <select  x-on:change="update_destination()" class="pure-input-1-2" x-model="destination_chosen">
                        <option value="-">leave in {{ .config.Server.DownloadPath }}</option>
                    {{ range $i := .config.Destinations }}
                        <option>{{ $i.Name }}</option>
                    {{ end }}
                    </select>
                </td>
            </tr>
            <tr><th>state</th><td x-text="state"></td></tr>
            <tr x-show="playlist_total > 0"><th>playlist progress</th><td x-text="playlist_current + '/' + playlist_total"></td></tr>
            <tr><th>progress</th><td x-text="percent"></td></tr>
            <tr><th>ETA</th><td x-text="eta"></td></tr>
            
        </table>
        <p>You can close this window and your download will continue. Check the <a href="/" target="_gropple_status">Status page</a> to see all downloads in progress.</p>
        {{ if .canStop }}
        <button x-show="state=='downloading'" class="pure-button" @click="stop()">stop</button>
        {{ end }}
        <div>
            <h4>Logs</h4>
            <pre x-text="log" style="height: auto;">
            </pre>
        </div>
    </div>
{{ end }}
{{ define "js" }}
<script>
    function popup() {
        history.replaceState(null, '', ['/fetch/{{ .dl.Id }}'])
        return { 
            eta: '', percent: 0.0, state: '??', filename: '', finished: false, log :'',
            playlist_current: 0, playlist_total: 0,
            profile_chosen: null,
            destination_chosen: null,
            watch_profile() {
                this.$watch('profile_chosen', value => this.profile_chosen(value))
            },
            update_profile(name) {
                console.log('you chose name', this.profile_chosen);
                let op = {
                   method: 'POST',
                   body: JSON.stringify({action: 'start', profile: this.profile_chosen}),
                   headers: { 'Content-Type': 'application/json' }
                };
                fetch('/rest/fetch/{{ .dl.Id }}', op)
                .then(response => response.json())
                .then(info => {
                    console.log(info)
                })
            },
            update_destination(name) {
                let op = {
                   method: 'POST',
                   body: JSON.stringify({action: 'change_destination', destination: this.destination_chosen}),
                   headers: { 'Content-Type': 'application/json' }
                };
                fetch('/rest/fetch/{{ .dl.Id }}', op)
                .then(response => response.json())
                .then(info => {
                    console.log(info)
                })
            },
            stop() {
                let op = {
                   method: 'POST',
                   body: JSON.stringify({action: 'stop'}),
                   headers: { 'Content-Type': 'application/json' }
                };
                fetch('/rest/fetch/{{ .dl.Id }}', op)
                .then(response => response.json())
                .then(info => {
                    console.log(info)
                })
            },
            fetch_data() {
                fetch('/rest/fetch/{{ .dl.Id }}')
                .then(response => response.json())
                .then(info => {
                    this.eta = info.eta;
                    this.percent = info.percent + "%";
                    this.state = info.state;
                    this.playlist_current = info.playlist_current;
                    this.playlist_total = info.playlist_total;
                    this.destination_chosen = null;
                    if (info.destination) {
                        this.destination_chosen = info.destination.name;
                    }
                    if (this.state != 'Choose Profile') {
                        this.profile_chosen = true;
                    }
                    this.finished = info.finished;
                    if (info.files && info.files.length > 0) {
                        this.filename = info.files[info.files.length - 1];
                    }
                    if (info.log && info.log.length > 0) {
                        this.log = info.log.join("\n");
                    }
                    console.log('finish?', this.finished);
                    if (! this.finished) {
                        setTimeout(() => { this.fetch_data() }, 1000);
                    }
                    console.log('log', this.log);
                });
            },
        }
    }
</script>
{{ end }}