{% extends "user/user-base.html" %}

{% block user_media %}
    {% include "timezone/media-css.html" %}
    {{ form.media.css }}
    <style>
        .sortedm2m-container, .sortedm2m-container p.selector-filter {
            width: 300px;
        }

        .sortedm2m-container p.selector-filter input {
            width: 262px;
        }

        ul.sortedm2m {
            width: 284px;
            min-height: 70px;
            max-height: 200px;
            height: 70px
        }

        .grayed {
            color: #666;
        }

        .inline-header {
            float: left;
            font-size: 1.1em;
            padding: 4px 8px;
            padding-left: 0;
        }

        .block-header {
            color: #666;
            font-size: 1.1em;
        }

        .fullwidth {
            display: block;
            overflow: hidden;
        }

        #edit-form {
            border: unset;
            background: unset;
            max-width: 700px;
        }

        #center-float {
            position: relative;
            margin: 0 auto auto -28.5em;
            left: 50%;
            width: 700px;
        }
    </style>
{% endblock %}

{% block js_media %}
    {% include "timezone/media-js.html" %}
    {{ form.media.js }}
    <script type="text/javascript">
        $(function () {
            $('#ace_user_script').on('ace_load', function (e, editor) {
                editor.getSession().setMode("ace/mode/javascript");
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $('#disable-2fa-button').click(function () {
                alert("The administrators for this site require all the staff to have two-factor authentication enabled, so it may not be disabled at this time.");
            });
        });
    </script>
{% endblock %}

{% block title_ruler %}{% endblock %}

{% block title_row %}
    {% set tab = 'edit' %}
    {% set user = request.profile %}
    {% include "user/user-tabs.html" %}
{% endblock %}

{% block body %}
    <div id="center-float">
        <form id="edit-form" action="" method="post" class="form-area">
            {% if form.errors %}
                <div class="alert alert-danger alert-dismissable">
                    <a href="#" class="close">x</a>
                    {{ form.non_field_errors() }}
                </div>
            {% endif %}

            {% csrf_token %}

            {% if edit_name_url %}
            <div style="margin-bottom: 1em; font-size: 1.1em">
                <label style="color:#666">{{_('Name and School')}}:</label>
                <span>
                    <a href="{{edit_name_url}}">{{_('Enter this form')}}</a>
                    <span style="float: right">({{_('It takes some time for admin to approve')}})</span>
                </span>
            </div>
            {% endif %}

            <div style="padding-top:0.5em" class="block-header">{{ _('Self-description') }}:</div>
            {{ form.about }}
            <hr>

            <table border="0" style="padding-top:0.7em">
                <tr>
                    <td style="vertical-align:top;">
                        <table style="padding-right:0.8em">
                            <tr title="{{ _('Select your closest major city') }}">
                                <td><label class="inline-header grayed">{{ _('Timezone') }}:</label></td>
                                <td><span class="fullwidth">{{ form.timezone }}</span></td>
                            </tr>
                            <tr>
                                <td><label class="inline-header grayed">{{ _('Preferred language') }}:</label></td>
                                <td><span class="fullwidth">{{ form.language }}</span></td>
                            </tr>
                            <tr>
                                <td><label class="inline-header grayed">{{ _('Editor theme') }}:</label></td>
                                <td><span class="fullwidth">{{ form.ace_theme }}</span></td>
                            </tr>
                            {% if has_math_config %}
                                <tr>
                                    <td><label class="inline-header grayed">{{ _('Math engine') }}:</label></td>
                                    <td><span class="fullwidth">{{ form.math_engine }}</span></td>
                                </tr>
                            {% endif %}
                            {% if form.newsletter %}
                                <tr>
                                    <td colspan="2">
                                        {{ form.newsletter }}
                                        <label for="id_newsletter" style="float: unset" class="inline-header grayed">
                                            {{- _('Notify me about upcoming contests') -}}
                                        </label>
                                    </td>
                                </tr>
                            {% endif %}
                            <tr>
                                <td colspan="2">
                                    {{ form.test_site }}
                                    <label for="id_test_site" style="float: unset" class="inline-header grayed">
                                        {{- form.test_site.label -}}
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <a href="http://www.gravatar.com/" title="{{ _('Change your avatar') }}"
                                       target="_blank" class="inline-header">{{ _('Change your avatar') }}</a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <a href="{{ url('password_change') }}" class="inline-header">
                                        {{ _('Change your password') }}
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2"><span class="inline-header">
                                    {% if profile.is_totp_enabled %}
                                        {{ _('Two Factor Authentication is enabled.') }}
                                        {% if require_staff_2fa and request.user.is_staff %}
                                            <a id="disable-2fa-button" class="button inline-button">Disable</a>
                                        {% else %}
                                            <a href="{{ url('disable_2fa') }}" class="button inline-button">Disable</a>
                                        {% endif %}
                                    {% else %}
                                        {{ _('Two Factor Authentication is disabled.') }}
                                        <a href="{{ url('enable_2fa') }}" class="button inline-button">Enable</a>
                                    {% endif %}
                                </span></td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <div style="padding-bottom:0.4em;margin-top:-2em" class="block-header">
                            {{ _('Affiliated organizations') }}:
                        </div>
                        {{ form.organizations }}
                    </td>
                </tr>
            </table>

            <hr>
            <div class="block-header">{{ _('User-script') }}:</div>
            {{ form.user_script }}
            <hr>

            <input type="submit" style="float:right" value="{{ _('Update profile') }}">
        </form>
    </div>
{% endblock %}