{% extends '/dashboard/dashboard_base.html' %}
{% set profile_settings_active = True %}
{% block head %}
{{ super() }}
<script>
    $(document).ready(function () {
        $('#form-ajax').submit(function (e) {
            var url = "{{ url_for('profile_settings_submit') }}"; // send the form data here.
            $.ajax({
                type: "POST",
                url: url,
                data: $('form').serialize(), // serializes the form's elements.
                success: function (data) {
                    console.log(data) // display the returned data in the console.
                }
            });
            e.preventDefault(); // block the traditional submission of the form.
        });
        // Inject our CSRF token into our AJAX request.
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ form.csrf_token._value() }}")
                }
            }
        })
    });
</script>
<style type="text/css">
    .tab-left {
        padding-left: 3rem;
    }
</style>
{% endblock head %}

{% block dashboard_body %}
<section>
    <h1 class="title">Profile Settings</h1>
    <!-- Profile Email Settings Form -->
    <form class="form-ajax" action="" method="POST" novalidate>
        {{ form.hidden_tag() }}
        <div class="field tab-left">
            <h4 class="title is-4">{{ form.show_email.label }}</h4>
            {{ form.show_email(class="radio") }}
        </div>
    </form>
    <!-- Profile Picture Form -->
    <form class="form-ajax" action="" method="POST" novalidate>
        {{ form.hidden_tag() }}
        <h4 class="title is-4">{{ form.profile_picture_file.label }}</h4>
        {{ form.profile_picture_file(class="") }}
        <div class="field tab-left">
            <div class="file">
                <label class="file-label">
                    <!--  -->
                    <span class="file-cta">
                        <span class="file-icon">
                            <i class="fas fa-upload"></i>
                        </span>
                        <span class="file-label">
                            Choose a file…
                        </span>
                    </span>
                </label>
            </div>
        </div>

        {{ form.submit(class="button is-danger") }}
    </form>
</section>
{% endblock dashboard_body %}