{{ define "content" }}
    <div id="layout" class="pure-g pure-u-1" x-data="popup_create()" >

        <h2>Download create</h2>
        <p>URL: <tt>{{ .url }}</tt></p>

        <p class="error"  x-show="error_message"  x-transition.duration.500ms x-text="error_message"></p>

        <table class="pure-table" >
            <tr>
                <th>profile</th>
                <td>
                    <select class="pure-input-1-2" x-model="profile_chosen">
                        <option value="">choose a profile</option>
                    {{ range $i := .config.DownloadProfiles }}
                        <option>{{ $i.Name }}</option>
                    {{ end }}
                    </select>
                </td>
            </tr>
            <tr>
                <th>destination</th>
                <td>
                    <select  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>&nbsp;</th>
                <td>
                    <button class="pure-button" @click="start()">start download</button>
                </td>
            </tr>

        </table>
    </div>
{{ end }}
{{ define "js" }}
<script>
    function popup_create() {
        return {
            profile_chosen: "",
            destination_chosen: "",
            error_message: "",
            start() {
                let op = {
                   method: 'POST',
                   body: JSON.stringify({action: 'start', url: '{{ .url }}', profile: this.profile_chosen, destination: this.destination_chosen}),
                   headers: { 'Content-Type': 'application/json' }
                };
                fetch('/fetch', op)
                .then(response => response.json())
                .then(response => {
                    console.log(response)
                     if (response.error) {
                        this.error_message = response.error;
                        this.success_message = '';
                        document.body.scrollTop = document.documentElement.scrollTop = 0;
                    } else {
                        this.error_message = '';
                        console.log(response.location)
                        window.location = response.location
                    }
                })
            }
        }
    }
</script>
{{ end }}