{% if theme() and file_exists('app/templates/themes/' + theme() + '/base.html') %}
    {% extends 'themes/' + theme() + '/base.html' %}
{% else %}
    {% extends "base.html" %}
{% endif %}
{% set active_child = 'edit_profile' %}
{% from 'bootstrap/form.html' import render_field %}

{% block app_content %}
<div class="row">
    <div class="col-12 col-md-8 position-relative main_pane">
        <nav class="mb-2" aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">{{ _('Home') }}</a></li>
            <li class="breadcrumb-item"><a href="/u/{{ user.link() }}">{{ user.display_name() }}</a></li>
            <li class="breadcrumb-item active">{{ _('Edit profile') }}</li>
          </ol>
        </nav>
        <h1>{{ _('Edit profile of %(name)s', name=user.user_name) }}</h1>
        {% include "user/_user_nav.html" %}

        <form method='post' enctype="multipart/form-data" role="form" autocomplete="off">
            {{ form.csrf_token() }}

            {{ render_field(form.email) }}
            {{ render_field(form.password_field) }}
            <h5> Profile Data </h5>
            {{ render_field(form.title) }}
            {{ render_field(form.about) }}
            {% if not low_bandwidth %}
                {% if markdown_editor %}
                    <script nonce="{{ session['nonce'] }}">
                        window.addEventListener("load", function () {
                            var downarea = new DownArea({
                                elem: document.querySelector('#about'),
                                resize: DownArea.RESIZE_VERTICAL,
                                hide: ['heading', 'bold-italic'],
                                value: document.getElementById("about").value
                            });
                            setupAutoResize('about');
                        });
                    </script>
                {% else %}
                    <a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="about">{{ _('Enable markdown editor') }}</a>
                {% endif %}
            {% endif %}
            <fieldset class="coolfieldset mt-2 mb-3">
                <legend>{{ _('Extra fields') }}</legend>
                <p>{{ _('Your homepage, pronouns, age, etc.') }}</p>
                <table class="hide-labels">
                    <tr>
                        <td>{{ render_field(form.extra_label_1) }}</td>
                        <td>{{ render_field(form.extra_text_1) }}</td>
                    </tr>
                    <tr>
                        <td>{{ render_field(form.extra_label_2) }}</td>
                        <td>{{ render_field(form.extra_text_2) }}</td>
                    </tr>
                    <tr>
                        <td>{{ render_field(form.extra_label_3) }}</td>
                        <td>{{ render_field(form.extra_text_3) }}</td>
                    </tr>
                    <tr>
                        <td>{{ render_field(form.extra_label_4) }}</td>
                        <td>{{ render_field(form.extra_text_4) }}</td>
                    </tr>
                </table>
            </fieldset>
            {{ render_field(form.bot) }}
            {{ render_field(form.matrixuserid) }}
            <small class="field_hint">e.g. @something:matrix.org. Include leading @ and use : before server</small>
            <h5> Profile Images </h5>
            {{ render_field(form.profile_file) }}
            <small class="field_hint">Provide a square image that looks good when small.</small>
            {% if user.avatar_id %}
                <p><a href="{{ user.avatar_image() }}" class="btn btn-sm btn-primary showElement" data-id="avatar_image">{{ _('View image') }}</a>
                   <a href="{{ url_for('user.remove_avatar') }}" class="btn btn-sm btn-primary"
                      hx-post="{{ url_for('user.remove_avatar') }}"
                      hx-target="#avatar_image"
                      hx-swap="outerHTML">{{ _('Remove image') }}</a>
                </p>
                <p><img id="avatar_image" class="community_icon_big rounded-circle" loading="lazy" style="display: none;" src="{{ user.avatar_image() }}" alt="{{ _('Profile pic') }}" /></p>
            {% endif %}
            {{ render_field(form.banner_file) }}
            <small class="field_hint">Provide a wide image - letterbox orientation.</small>
            {% if user.cover_id %}
                <p><a href="{{ user.cover_image() }}" class="btn btn-sm btn-primary showElement" data-id="cover_div">{{ _('View image') }}</a> |
                   <a href="{{ url_for('user.remove_cover') }}" class="btn btn-sm btn-primary"
                      hx-post="{{ url_for('user.remove_cover') }}"
                      hx-target="#cover_div"
                      hx-swap="outerHTML">{{ _('Remove image') }}</a></p>
                <div id="cover_div" class="community_header mb-4" style="display: none; height: 240px; background-image: url({{ user.cover_image() }});"></div>
            {% endif %}

            <p class="mt-4">{{ render_field(form.submit) }}</p>
        </form>
        <p class="mt-4 pt-4">
            <a class="btn btn-warning" href="{{ url_for('user.delete_account') }}">{{ _('Delete account') }}</a>
        </p>
    </div>
</div>
{% endblock %}