{% extends 'layouts/base.html' %}

{% load i18n %}
{% load static %}
{% load pyaa %}

{% block content %}

{% url 'account_profile' as url_account_profile %}

<div class="container mx-auto px-4 py-8 max-w-xl">
    <h1 class="text-2xl font-bold text-center mb-6">
        {% translate "title.account-update-avatar" %}
    </h1>

    <div class="flex justify-center mb-6">
        <div class="avatar">
            <div class="w-24 rounded-full">
                {% if customer.avatar %}
                <img src="{{ customer.avatar.url }}" alt="profile-image">
                {% else %}
                <img src="{% static 'images/profile-no-image.png' %}" alt="profile-image">
                {% endif %}
            </div>
        </div>
    </div>

    <form method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}

        {% element fields form=form %}
        {% endelement %}

        <div class="flex flex-col gap-2 mt-4">
            <button type="submit" class="btn btn-primary">
                {% translate "button.update" %}
            </button>
            <a href="{{ url_account_profile }}" class="btn btn-ghost">
                {% translate "button.cancel" %}
            </a>
        </div>
    </form>
</div>

{% endblock content %}