{{ define "content" }}

{{ template "menu.tmpl" . }}

<div x-data="config()" x-init="fetch_config();">

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

    <p>Note: changes are not saved until the "Save Config" button is pressed.</p>

    <div class="pure-g">
        <div class="pure-u-1">
            <button class="pure-button pure-button-primary" @click="save_config();" href="#">Save Config</button>
        </div>
    </div>

    <div class="pure-g">

        <div class="pure-u-lg-1-3 pure-u-1 l-box">
   
            <form class="pure-form pure-form-stacked gropple-config">
                <fieldset>

                    <legend>Server</legend>

                    <label for="config-server-port">Listen Port</label>
                    <input type="text" id="config-server-port" placeholder="port number" x-model.number="config.server.port" />
                    <span class="pure-form-message">The port the web server will listen on.</span>

                    <label for="config-server-address">Server address (URL)</label>
                    <input type="text" id="config-server-address" class="input-long" placeholder="server address" x-model="config.server.address" />
                    <span class="pure-form-message">
                        The address the service will be available on. Generally it will be http://hostname:port where
                        hostname is the host the server is running on, and port is the port you set above.
                    </span>

                    <label for="config-server-downloadpath">Download path</label>
                    <input type="text" id="config-server-downloadpath" placeholder="path" class="input-long" x-model="config.server.download_path" />
                    <span class="pure-form-message">The default path on the server to download files to.</span>

                    <label for="config-server-max-downloads">Maximum active downloads per domain</label>
                    <input type="text" id="config-server-max-downloads" placeholder="2" class="input-long" x-model.number="config.server.maximum_active_downloads_per_domain" />
                    <span class="pure-form-message">How many downloads can be simultaneously active. Use '0' for no limit. This limit is applied per domain that you download from.</span>

                    <legend>UI</legend>

                    <p>Note that changes to the popup dimensions will require you to recreate your bookmarklet.</p>

                    <label for="config-ui-popupwidth">Popup Width</label>
                    <input type="text" id="config-ui-popupwidth" placeholder="width in pixels" x-model.number="config.ui.popup_width" />
                    <span class="pure-form-message">The width of popup windows in pixels.</span>

                    <label for="config-ui-popupheight">Popup Height</label>
                    <input type="text" id="config-ui-popupheight" placeholder="height in pixels" x-model.number="config.ui.popup_height" />
                    <span class="pure-form-message">The height of popup windows in pixels.</span>

                </fieldset>
            </form>

        </div>
        <div class="pure-u-lg-1-3 pure-u-1 l-box">
            <form class="pure-form gropple-config">
                <fieldset>

                    <legend>Download Profiles</legend>

                    <p>Gropple supports multiple download profiles. Each profile specifies a different youtube-dl 
                        compatible command, and arguments. When starting a download, you may choose which profile 
                        to use. The URL will be appended to the argument list at the end.
                    </p>

                    <hr>

                    <template x-for="(profile, i) in config.profiles">
                        <div>
                            <label x-bind:for="'config-profiles-'+i+'-name'">Name of profile <span x-text="i+1"></span>
                            </label>                                
                            
                            <input type="text" x-bind:id="'config-profiles-'+i+'-name'" class="input-long" placeholder="name" x-model="profile.name" />
                            <button class="pure-button button-del" href="#" @click.prevent="config.profiles.splice(i, 1);;">delete profile</button>

                            <span class="pure-form-message">The name of this profile. For your information only.</span>

                            <label x-bind:for="'config-profiles-'+i+'-command'">Command to run</label>
                            <input type="text" x-bind:id="'config-profiles-'+i+'-command'" class="input-long" placeholder="name" x-model="profile.command" />
                            <span class="pure-form-message">Which command to run. Your path will be searched, or you can specify the full path here.</span>


                            <label>Arguments</label>

                            <template x-for="(arg, j) in profile.args">
                                <div>
                                    <input type="text" x-bind:id="'config-profiles-'+i+'-arg-'+j" placeholder="arg" x-model="profile.args[j]" />
                                    <button class="pure-button button-del" href="#" @click.prevent="profile.args.splice(j, 1);;">delete arg</button>
                                </div>
                            </template>

                            <button class="pure-button button-add" href="#" @click.prevent="profile.args.push('');">add arg</button>
                            <span class="pure-form-message">Arguments for the command. Note that the shell is not used, so there is no need to quote or escape arguments, including those with spaces.</span>

                            <hr>

                        </div>
                    </template>

                    <button class="pure-button button-add" href="#" @click.prevent="config.profiles.push({name: 'new profile', command: 'youtube-dl', args: []});">add profile</button>

                </fieldset>
            </form>
        </div>

        <div class="pure-u-lg-1-3 pure-u-1 l-box">
            <form class="pure-form gropple-config">
                <fieldset>
                    <legend>Destinations</legend>
                    <p>You can specify custom destinations (directories) here. Downloads can be
                        moved to one of these directories after completion from the index page, 
                        if you do not want them to be left in the download path above.</p>
                    </p>
                    <template x-for="(dest, i) in config.destinations">
                    <div>
                        <label x-bind:for="'config-destinations-'+i+'-name'">Name of destination <span x-text="i+1"></span>
                        </label>                                
                        
                        <input type="text" x-bind:id="'config-destinations-'+i+'-name'" class="input-long" placeholder="name" x-model="dest.name" />

                        <span class="pure-form-message">The name of this destination. For your information only.</span>

                        <label x-bind:for="'config-destinations-'+i+'-command'">Path</label>
                        <input type="text" x-bind:id="'config-destinations-'+i+'-command'" class="input-long" placeholder="name" x-model="dest.path" />
                        <span class="pure-form-message">Path to move completed downloads to.</span>

                        <button class="pure-button button-del" href="#" @click.prevent="config.destinations.splice(i, 1);">delete destination</button>

                        <hr>

                    </div>
                </template>

                <button class="pure-button button-add" href="#" @click.prevent="config.destinations.push({name: 'new destination', path: '/tmp'});">add destination</button>

            </fieldset>
        </form>
    </div>
    <div class="pure-g">
        <div class="pure-u-1">
            <button class="pure-button pure-button-primary" @click="save_config();" href="#">Save Config</button>
        </div>
    </div>


</div>

{{ end }}

{{ define "js" }}
<script>
    function config() {
        return { 
            config: { server : {}, ui : {}, profiles: [], destinations: []}, 
            error_message: '',
            success_message: '',

            fetch_config() {
                fetch('/rest/config')
                .then(response => response.json())
                .then(config => {
                    this.config = config;
                })
                .catch(error => {
                    console.log('failed to fetch config', error);
                });
            },
            save_config() {
                let op = {
                   method: 'POST',
                   body: JSON.stringify(this.config),
                   headers: { 'Content-Type': 'application/json' }
                };
                fetch('/rest/config', op)
                .then(response => {
                    return response.json();
                })
                .then(response => {
                    if (response.error) {
                        this.error_message = response.error;
                        this.success_message = '';
                        document.body.scrollTop = document.documentElement.scrollTop = 0;
                    } else {
                        this.error_message = '';
                        this.success_message = 'configuration saved';
                        document.body.scrollTop = document.documentElement.scrollTop = 0;
                        this.config = response;
                    }
                })
                .catch(error => {
                    console.log('exception' ,error);
                });
            }
        }
    }
</script>
{{ end }}