{{ 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.
                            If you are using gropple in portable mode and store the executables with the gropple executable, use a prefix of
                            <tt>./</tt>, for instance <tt>yt-dlp.exe</tt>.
                            </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 }}