{{ define "content" }}


<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>Changes are not saved until "Save Changes" is pressed at the bottom of the page.</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" />
                            <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>

                            <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>
    <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: [] }, 
            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 }}