{% extends "base.html" %}
{% from 'bootstrap/form.html' import render_field %}

{% block app_content %}
    <div class="row">
        <div class="col main_pane">
            <nav 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 class="mt-2">{{ _('Edit profile of %(name)s', name=user.user_name) }}</h1>
            <form method='post' enctype="multipart/form-data">
                {{ form.csrf_token() }}
                {{ render_field(form.title) }}
                {{ render_field(form.email) }}
                {{ render_field(form.password_field) }}
                <hr />
                {{ render_field(form.about) }}
                {{ render_field(form.matrix_user_id) }}
                <small class="field_hint">e.g. @something:matrix.org. Include leading @ and use : before server</small>
                {{ render_field(form.profile_file) }}
                <small class="field_hint">Provide a square image that looks good when small.</small>
                {{ render_field(form.banner_file) }}
                <small class="field_hint">Provide a wide image - letterbox orientation.</small>
                <hr />
                {{ render_field(form.bot) }}
                {{ render_field(form.submit) }}
            </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 %}