{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/profile.css' %}?v=20260519">
{% endblock %}

{% block content %}
<section class="profile-container">
    <div class="profile-shell">
        <h1>Edit Profile</h1>
        <form method="post" enctype="multipart/form-data" class="profile-edit-form">
            {% csrf_token %}
            <div class="form-row">
                <label>First name</label>
                {{ form.first_name }}
            </div>
            <div class="form-row">
                <label>Last name</label>
                {{ form.last_name }}
            </div>
            <div class="form-row">
                <label>Email</label>
                {{ form.email }}
            </div>
            <div class="form-row">
                <label>Profile picture</label>
                {% if profile.image %}
                    <div class="current-image"><img src="{{ profile.image.url }}" alt="avatar"/></div>
                {% endif %}
                {{ form.image }}
            </div>
            <div class="form-row">
                <label>Bio</label>
                {{ form.bio }}
            </div>
            <div class="form-row">
                <button class="btn btn-primary" type="submit">Save</button>
                <a href="{% url 'profile' %}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</section>
{% endblock %}