{{ define "content" }}


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

    <h2>gropple config</h2>

    <p x-text="error_message"></p>

    <p x-show="version && version.upgrade_available">
        <a href="https://github.com/tardisx/gropple/releases">Upgrade is available</a> - 
        you have 
        <span x-text="version.current_version"></span> and 
        <span x-text="version.github_version"></span>
    is available.</p>

    <div class="pure-g">
        <div class="pure-u-md-1-2 pure-u-1">
   
            <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 path on the server to download files to.</span>

                    <legend>UI</legend>

                    <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-md-1-2 pure-u-1">
            <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>

                    <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" />
                            <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);;">del</button>
                                </div>
                            </template>

                            <button class="pure-button button-add" href="#" @click.prevent="profile.args.push('');">add arg</button>


                            <hr>

                        </div>
                    </template>

                </fieldset>
            </form>
        </div>
    </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: [] }, 
            version: {},
            error_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() {
                console.log(this.config);
                let op = {
                   method: 'POST',
                    body: JSON.stringify(this.config),
                    headers: { 'Content-Type': 'application/json' }
                }
                fetch('/rest/config', op)
                .then(response => {
                  if (response.status >= 200 && response.status <= 299) {
                      return response.json();
                  } else {
                    throw Error(response);
                  }})
                .then(config => {
                    console.log('fixing object');
                    this.config = config;
                })
                .catch(error => {
                    this.error_message = error.error;
                    console.log('failed to update config', error);
                });
            }
        }
    }
</script>
{{ end }}