{#{% extends 'ui/layout.html' %}#}
{% load i18n %}
{% load partials %}
{% load ui %}

{% partialdef header %}
    {% if not user.is_managed %}
        <button class="button is-light" hx-get="{% url 'user:change_password' %}" hx-swap="none">
            <span>{% translate 'Change Password' %}</span>
        </button>
        <button class="button is-light" hx-get="{% url 'user:change_email' %}" hx-swap="none">
            <span>{% translate 'Change E-Mail' %}</span>
        </button>
    {% endif %}
{% endpartialdef %}

{% partialdef data %}
    <section class="box" x-data="{themeType: '{{ form.theme.value }}'}">
        <form id="user-form" hx-post="{% url 'user:detail' %}" hx-trigger="change changed" hx-select="#user-form" hx-swap="outerHTML" hx-select-oob="#navbar-user-name">
            {% csrf_token %}
            <div class="columns">
                <div class="column">
                    {% include 'ui/form_error.html' %}
                    {% include 'ui/form_error.html' with form=theme_form %}
                </div>
            </div>
            <div class="columns is-multiline">
                <div class="column is-6">{{ form.username|wrap_form_field }}</div>
                {% if not user.is_managed %}
                    <div class="column is-6">{{ user|wrap_model_field:'email' }}</div>
                {% else %}
                    <div class="column is-6"></div>
                {% endif %}
                <div class="column is-6">{{ form.first_name|wrap_form_field }}</div>
                <div class="column is-6">{{ form.last_name|wrap_form_field }}</div>
                <div class="column is-6">{{ form.language_code|wrap_form_field }}</div>
                <div class="column is-6">{{ form.theme|wrap_form_field }}</div>
            </div>
        </form>
        <div id="theme" x-show="['custom'].includes(themeType)">
            <p class="title is-size-5 mb-0 mt-4">{% translate 'Custom Theme' %}</p>
            <hr class="mt-1"/>
            <form id="theme-form" hx-post="{% url 'user:detail' %}" hx-trigger="change changed" hx-select="#theme-form" hx-swap="outerHTML">
                {{ theme_form.user }}
                <div class="columns is-multiline">
                    <div class="column">{{ theme_form.base_theme|wrap_form_field }}</div>
                    <div class="column">{{ theme_form.color_primary|wrap_form_field }}</div>
                    <div class="column">{{ theme_form.color_success|wrap_form_field }}</div>
                    <div class="column">{{ theme_form.color_link|wrap_form_field }}</div>
                    <div class="column">{{ theme_form.color_warning|wrap_form_field }}</div>
                    <div class="column">{{ theme_form.color_danger|wrap_form_field }}</div>
                    <div class="column">{{ theme_form.navbar_color|wrap_form_field }}</div>
                </div>
            </form>
        </div>
    </section>
{% endpartialdef %}
