{% extends "app" %}
{% block title %}Settings{% endblock %}
{% block content %}
    <div class="flex flex-col py-8">
        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <form action="" method="POST">
                <div>
                    <div>
                        <div class="">
                            <div class="">
                                <div role="group" aria-labelledby="label-email">
                                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
                                        <div>
                                            <div
                                                class="text-base leading-6 font-medium text-gray-900 sm:text-sm sm:leading-5 sm:text-gray-700"
                                                id="label-email">
                                                Authentication
                                            </div>
                                        </div>
                                        <div class="mt-4 sm:mt-0 sm:col-span-2">
                                            <div class="max-w-lg">
                                                <div class="relative flex items-start">
                                                    <div class="absolute flex items-center h-5">
                                                        <input id="authentication"
                                                               type="checkbox"
                                                               name="validate_auth_tokens"
                                                               value="1"
                                                               v-model="configuration.validate_auth_tokens"
                                                               class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"/>
                                                    </div>
                                                    <div class="pl-7 text-sm leading-5">
                                                        <label for="authentication" class="font-medium text-gray-700">Require
                                                            authentication tokens</label>
                                                        <p class="text-gray-500">Only allow connection from clients with
                                                            valid authentication tokens</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div
                                        class="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                                        <label for="motd"
                                               class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
                                            Message of the day
                                        </label>
                                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                                            <div class="max-w-lg flex rounded-md shadow-sm">
                                                <textarea id="motd" name="motd" rows="3"
                                                          v-model="configuration.messages.message_of_the_day"
                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                            </div>
                                            <p class="mt-2 text-sm text-gray-500">This message will be shown when a
                                                successful connection can be established.</p>
                                        </div>
                                    </div>

                                    <div
                                        class="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                                        <label for="maximum_connection_length"
                                               class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
                                            Maximum connection length
                                        </label>
                                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                                            <div class="max-w-lg flex rounded-md shadow-sm">
                                                <input type="number" id="maximum_connection_length" name="maximum_connection_length"
                                                          v-model="configuration.maximum_connection_length"
                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
                                            </div>
                                            <p class="mt-2 text-sm text-gray-500">The amount of minutes that clients may be connected to this expose server. 0 means there is no limit.</p>
                                        </div>
                                    </div>

                                    <div
                                        class="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                                        <label for="invalid_auth_token"
                                               class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
                                            Authentication Failed
                                        </label>
                                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                                            <div class="max-w-lg flex rounded-md shadow-sm">
                                                <textarea id="invalid_auth_token"
                                                          name="invalid_auth_token"
                                                          rows="3"
                                                          v-model="configuration.messages.invalid_auth_token"
                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                            </div>
                                            <p class="mt-2 text-sm text-gray-500">This message will be shown when a
                                                user tries to connect with an invalid authentication token.</p>
                                        </div>
                                    </div>

                                    <div
                                        class="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                                        <label for="subdomain_taken"
                                               class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
                                            Subdomain taken
                                        </label>
                                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                                            <div class="max-w-lg flex rounded-md shadow-sm">
                                                <textarea id="subdomain_taken" name="subdomain_taken" rows="3"
                                                          v-model="configuration.messages.subdomain_taken"
                                                          class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                            </div>
                                            <p class="mt-2 text-sm text-gray-500">This message will be shown when a
                                                user tries to connect with an already registered subdomain. You can use
                                                <code class="font-mono bg-gray-500 text-white p-1">:subdomain</code> as
                                                a placeholder.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-5">
                    <div class="flex justify-end">
                        <span class="ml-3 inline-flex rounded-md shadow-sm">
        <button type="submit"
                @click.prevent="saveSettings"
                class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
          Save
        </button>
      </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    <script>
        new Vue({
            el: '#app',

            delimiters: ['@{', '}'],

            data: {
                configuration: {{ configuration|json_encode|raw }}
            },

            methods: {
                saveSettings() {
                    fetch('/api/settings', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.configuration)
                    }).then((response) => {
                        return response.json();
                    }).then((data) => {
                        this.configuration = data.configuration;
                    });
                }
            }
        })
    </script>
{% endblock %}