{% load i18n widget_tweaks %}
<div id="profile-container w-100">
    {% if success %}
    <div class="alert alert-success mt-3" role="alert">
        {% translate "Profile updated successfully!" %}
    </div>
    {% elif failed %}
    <div class="alert alert-danger mt-3" role="alert">
        {% translate "Failed to update profile." %}
        {% if exception %}
        <p>{{ exception }}</p>
        {% endif %}
    </div>
    {% endif %}


    <form method="post" enctype="multipart/form-data" class="mt-4" hx-post="{% url 'tinyuser:profile' %}"
        hx-target="#profile-container" hx-swap="outerHTML">
        {% csrf_token %}

        {% if form.errors.first_name %}
        {% for error in form.errors.first_name %}
        <div class="alert alert-danger" role="alert">
            {{ error }}
        </div>
        {% endfor %}
        {% endif %}
        <div class="mb-3 form-floating">
            {% render_field form.first_name class="form-control" placeholder=form.first_name.label %}
            <label
                for="{{ form.first_name.id_for_label }} {% if form.errors.first_name %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.first_name.label }}
            </label>
        </div>
        <div class="mb-3 form-floating">
            {% render_field form.last_name class="form-control" placeholder=form.last_name.label %}
            <label
                for="{{ form.last_name.id_for_label }} {% if form.errors.last_name %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.last_name.label }}
            </label>
        </div>
        <div class="mb-3 form-floating">
            {% render_field form.location class="form-control" placeholder=form.location.label %}
            <label
                for="{{ form.location.id_for_label }} {% if form.errors.location %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.location.label }}
            </label>
        </div>
        <div class="mb-3 form-floating">
            {% render_field form.birth_date class="form-control" placeholder=form.birth_date.label %}
            <label
                for="{{ form.birth_date.id_for_label }} {% if form.errors.birth_date %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.birth_date.label }}
            </label>
        </div>
        <div class="mb-3 form-floating">
            {% render_field form.website class="form-control" placeholder=form.website.label %}
            <label
                for="{{ form.website.id_for_label }} {% if form.errors.website %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.website.label }}
            </label>
        </div>
        <div class="mb-3 form-floating">
            {% render_field form.mastodon_url class="form-control" placeholder=form.mastodon_url.label %}
            <label
                for="{{ form.mastodon_url.id_for_label }} {% if form.errors.mastodon_url %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.mastodon_url.label }}
            </label>
        </div>
        <div class="mb-3 form-floating">
            {% render_field form.bio class="form-control" placeholder=form.bio.label style="height: 15rem;" %}
            <label
                for="{{ form.bio.id_for_label }} {% if form.errors.bio %}is-invalid{% elif success %}is-valid{% endif %}">
                {{ form.bio.label }}
            </label>
        </div>
        <h2 class="h3">{% translate "Avatars" %}</h2>
        <h3 class="h4">{% translate "Small avatar" %}</h3>
        <div class="mb-2">
            <div class="input-group">
                <label for="{{ form.avatar_small.id_for_label }}" class="visually-hidden">
                    {{ form.avatar_small.label }}
                </label>
                {% render_field form.avatar_small class="form-control" %}
            </div>
        </div>
        <div class="mb-3">
            {% if form.instance.avatar_small %}
            <img src="{{ form.instance.avatar_small.url }}" alt="{% translate " Current small avatar" %}"
                class="img-fluid" style="max-width: 128px;">
            {% else %}
            <p>{% translate "No small avatar uploaded." %}</p>
            {% endif %}
        </div>

        <h3 class="h4">{% translate "Medium avatar" %}</h3>
        <div class="input-group mb-2">
            <label for="{{ form.avatar_medium.id_for_label }}" class="visually-hidden">
                {{ form.avatar_medium.label }}
            </label>
            {% render_field form.avatar_medium class="form-control" %}
        </div>
        <div class="mb-3">
            {% if form.instance.avatar_medium %}
            <img src="{{ form.instance.avatar_medium.url }}" alt="{% translate " Current Medium avatar" %}"
                class="img-fluid" style="max-width: 256px;">
            {% else %}
            <p>{% translate "No medium avatar uploaded." %}</p>
            {% endif %}
        </div>

        <h3 class="h4">{% translate "Large avatar" %}</h3>
        <div class="input-group mb-2">
            <label for="{{ form.avatar_large.id_for_label }}" class="visually-hidden">
                {{ form.avatar_large.label }}
            </label>
            {% render_field form.avatar_large class="form-control" %}
        </div>

        <div class="mb-3">
            {% if form.instance.avatar_large %}
            <img src="{{ form.instance.avatar_large.url }}" alt="{% translate " Current large avatar" %}"
                class="img-fluid" style="max-width: 512px;">
            {% else %}
            <p>{% translate "No large avatar uploaded." %}</p>
            {% endif %}
        </div>


        <h3 class="h4">{% translate "Full sized avatar" %}</h3>
        <div class="input-group mb-2">
            <label for="{{ form.avatar_full.id_for_label }}" class="visually-hidden">
                {{ form.avatar_full.label }}
            </label>
            {% render_field form.avatar_full class="form-control" %}
        </div>

        <div class="mb-3">
            {% if form.instance.avatar_full %}
            <img src="{{ form.instance.avatar_full.url }}" alt="{% translate " Current full avatar" %}"
                class="img-fluid" style="max-width: 100%;">
            {% else %}
            <p>{% translate "No full avatar uploaded." %}</p>
            {% endif %}
        </div>

        <div class="text-end">
            <button type="submit" class="btn btn-primary">{% translate "Save" %}</button>
        </div>
    </form>
</div>