{% load bootstrap4 %}
{% load i18n %}
{% load static %}
{% load compress %}

<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">
            {% bootstrap_field form.get_gravatar layout='event-inline' %}
            <div class="form-image-preview {% if not user.avatar and not user.get_gravatar %}d-none{% endif %}">
                <a href="{% if user.avatar %}{{ user.avatar.url }}{% endif %}" data-lightbox="{% if user.avatar %}{{ user.avatar.url }}{% endif %}">
                    <img loading="lazy"
                         class="avatar"
                         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 }}"
                         {% endif %}
                    />
                </a>
            </div>
        </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>
