{% load bootstrap4 %}
{% load i18n %}

<div class="avatar-form form-group row">
    <label class="col-md-3 col-form-label">
        {% translate "Profile picture" %}
    </label>
    <div class="avatar-form-fields col-md-9">
        <div class="d-flex align-items-start">
            <img
                class="avatar {% if not user.avatar and not user.get_gravatar %}d-none{% endif %} order-1"
                data-gravatar="{{ user.gravatar_parameter }}"
                data-avatar="{% if user.avatar %}{{ user.avatar.url }}{% endif %}"
                alt="{% translate "Your avatar" %}"
                {% if user.avatar %}
                    src="{{ user.avatar.url }}"
                {% elif user.get_gravatar %}
                    src="https://www.gravatar.com/avatar/{{ user.gravatar_parameter }}?s=512"
                {% endif %}
            />

            {% bootstrap_field form.get_gravatar layout='event-inline' %}
        </div>

        <div class="avatar-upload">
            {% bootstrap_field form.avatar layout='inline' %}
            <small class="form-text text-muted d-block">{{ form.avatar.help_text }}</small>
        </div>
    </div>
</div>
