{% extends 'core/layout/base.html' %}
{% load static %}

{% block content %}
<div class="main-title">
    <h1>Profile: Dr. Pepper</h1>
</div>

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

    {{ form.non_field_errors }}

    <div class="form-row">
        <label>Email</label>
        {{ form.email }}
        {{ form.email.errors }}
    </div>

    <div class="form-row">
        <label>Nickname</label>
        {{ form.nickname }}
        {{ form.nickname.errors }}
    </div>

    <div class="form-row">
        <label>Avatar</label>
        {{ form.avatar }}
    </div>

    <div class="avatar-preview">
        {% if request.user.profile.avatar %}
            <img src="{{ request.user.profile.avatar.url }}" width="120">
        {% else %}
            <img src="{% static 'core/img/profile.webp' %}" width="120">
        {% endif %}
    </div>

    <button class="button" type="submit">Save</button>
</form>

{% endblock %}