<h2> {{ tr('Settings') }}
</h2>
<a href="#" class="go-back">{{ tr('Back') }}</a>
<p>
{{ tr('any change you make in this page will directly be saved!') }}
</p>
{% block form %}
    <form id="schedular-settings-form" class="form-horizontal" role="form" method="post">

        <table class="form-table">
            <tbody>
            <tr class="form-field">
                <th><label for="event-calendar">{{ tr('Default calendar') }}</label></th>
                <td><select name="defaultCalendar" id="event-calendar">
                        {% for cal in calendars %}
                            <option value="{{ cal.id }}" {{ cal.id==calendar ? 'selected' }}>{{ cal.name }}</option>
                        {% endfor %}
                    </select></td>
            </tr>
            <tr class="form-field">
                <th>
                    <label for="recaptcha-clientside">{{ tr('Recaptcha Clientside (site key)') }}</label>
                    <sup><a href="https://www.google.com/recaptcha">{{ tr('get it here') }}</a></sup>
                </th>
                <td><input name="reCaptchaClient" id="recaptcha-clientside" placeholder="{{ tr('Recaptcha Clientside key') }}" value="{{ setting('reCaptchaClient') }}" /></td>
            </tr>
            <tr class="form-field">
                <th><label for="recaptcha-serverside">{{ tr('Recaptcha Serverside (secret key)') }}</label></th>
                <td><input name="reCaptchaServer" id="recaptcha-serverside" placeholder="{{ tr('Recaptcha Serverside key') }}" value="{{ setting('reCaptchaServer') }}"/></td>
            </tr>
            </tbody>
        </table>
    </form>
{% endblock %}

<script>

    jQuery('#schedular-settings-form input,select').change(function(){
        //Automatically safe setting directly:
        api.SetSetting(jQuery(this).prop('name'),jQuery(this).val());
    });
</script>