{% extends BASE_HTML %}
{% load i18n creme_bricks creme_widgets %}

{% block page_title %}{% translate 'View your settings' %} - {% endblock %}

{% block content %}
    <div class="hat-bar-container">
        <div class="hat-bar">{% translate 'Home' as title %}
            <div class="bar-icon">{% widget_icon name='config' size='brick-hat-bar' label=_('Configuration') %}</div>
            <div class="bar-title"><h1>{% translate 'View and edit your Creme settings' %}</h1></div>
        </div>
    </div>

    <div class="user-settings-inline-forms">
        <div class="user-settings-inline-form theme_picker">{{theme_form}}</div>
        <div class="user-settings-inline-form tz_picker">{{tz_form}}</div>
        <div class="user-settings-inline-form language_picker">{{language_form}}</div>
        {% if displayed_name_form %}
        <form class="user-settings-inline-form displayed_name_form" action="{% url 'creme_config__set_user_name' %}" method="POST">
            {% csrf_token %}
            {{displayed_name_form}}
            <input type="submit" value="{% translate 'Save' %}">
        </form>
        {% endif %}

        <script type="text/javascript">
        $(document).ready(function() {
            return new creme.UserSettingController($(this));
        });
        </script>
    </div>

{#    {% brick_declare bricks %} #}
    {% brick_declare bricks.main %}
{#    {% brick_display bricks %} #}
    {% brick_display bricks.main %}
    {% brick_end %}
{% endblock %}