{% extends shell('app') %}

{% block title %}{{ _('Edit profile') }}{% endblock %}

{% block content %}

<h1 class="h3 mb-3">{{ _('Edit profile') }}</h1>

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="row">
    <div class="col-12 mb-3">
        <div class="alert alert-{{ category }}" role="alert">
            <div class="alert-message">
                {% if category == 'success' %}
                <h4 class="alert-heading"><i class="align-middle" data-feather="check-circle"></i> {{ _('Success') }}</h4>
                {% elif category == 'error' %}
                <h4 class="alert-heading"><i class="align-middle" data-feather="x-circle"></i> {{ _('Error') }}</h4>
                {% endif %}
                <p style="margin-bottom: 0px">{{ message }}</p>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}
{% endwith %}

<div class="row">

    <div class="col-12 col-lg-6">

        <form method="POST" action="{{ url_for('profile.edit_profile') }}" class="needs-validation" novalidate>
            {{ form.hidden_tag() }}

            {# Every visible field of the form, in order, so the fields other
               features register (an affiliation, say) are asked for too. A
               field this page has no placeholder for keeps its own
               render_kw. #}
            {% set placeholders = {
                'name': _('Enter your name'),
                'surname': _('Enter your surname'),
            } %}
            {% for field in form if field.widget.input_type not in ('hidden', 'submit') %}
                {% set known = {} %}
                {% if field.short_name in placeholders %}
                    {% set known = {'placeholder': placeholders[field.short_name]} %}
                {% endif %}
                {% if field.widget.input_type == 'checkbox' %}
                <div class="form-group form-check mb-3">
                    {{ field(class="form-check-input" ~ (" is-invalid" if field.errors else "")) }}
                    {{ field.label(class="form-check-label") }}
                {% else %}
                <div class="form-group mb-3">
                    {{ field.label(class="form-label") }}
                    {{ field(class="form-control" ~ (" is-invalid" if field.errors else ""), **known) }}
                {% endif %}
                    {% if field.description %}
                    <p class="form-text text-muted small">{{ field.description }}</p>
                    {% endif %}
                    {% for error in field.errors %}
                    <span class="text-danger small">{{ error }}</span>
                    <br>
                    {% endfor %}
                </div>
            {% endfor %}

            <div class="row form-group">
                <div class="col-12 mt-3">
                    {{ form.submit(class="btn btn-primary") }}
                </div>
            </div>
        </form>

    </div>

</div>

{# What other features add below the form: linked accounts, notification
   preferences and the like. Each section is a block of its own, with its
   own forms if it needs them, which is why it sits outside the profile
   form. Drawn only when a callback returns something. #}
{% set sections = render_template_hooks("profile.edit.sections") %}
{% if sections %}
<div class="row profile-sections mt-4">
    <div class="col-12 col-lg-6">
        {{ sections }}
    </div>
</div>
{% endif %}

{% endblock %}