{{ 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="button-small pure-button button-small 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="button-small 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="button-small pure-button button-del" href="#" @click.prevent="profile.args.splice(j, 1);;">delete arg</button>
                                </div>
                            </template>

                            <button class="button-small 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="button-small 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>Download Options</legend>
                    <p>You can specify custom download options here. These are (optionally) selectable in addition
                    to the profile when starting a download. They append extra arguments to the downloader command.
                    The most common use is to specify a particular <tt>-o</tt> argument to <tt>yt-dlp</tt> to allow files to be downloaded
                    to a custom path.</p>
                    </p>
                    <template x-for="(download_option, i) in config.download_options">
                    <div>
                        <label x-bind:for="'config-download-option-'+i+'-name'">Name of option <span x-text="i+1"></span>
                        </label>

                        <input type="text" x-bind:id="'config-download-option-'+i+'-name'" class="input-long" placeholder="name" x-model="download_option.name" />

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

                            <label>Arguments</label>

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

                        <hr>

                    </div>
                </template>

                <button class="button-small pure-button button-add" href="#" @click.prevent="config.download_options.push({name: 'new option', args: ['-o', 'someting']});">add option</button>

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


</div>

{{ end }}

{{ define "js" }}
<script>
    function config() {
        return {
            config: { server : {}, ui : {}, profiles: [], download_options: []},
            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 }}