{% extends "base.html" %}

{% block content %}
<div class="mx-auto text-center">
<h1> Your Profile</h1>
{% if user.profile_image %}
    <img src="static/uploads/{{ user.profile_image }}" class="border rounded-circle">
{% else %}
    <img src="static/uploads/default.png" class="border rounded-circle">
{% endif %}
<form method="POST" action="" enctype="multipart/form-data">
    <input type="file" id="profilepic_upload" name="profilepic_upload" accept="image/png, image/jpeg">
    <button type="submit" class="btn btn-primary">Update Photo</button>
</form>
<p>{{ user.firstname }}</p>
<p>{{ user.lastname }}</p>
<p>{{ user.gender }} , {{ user.age }}</p>
<form method="POST">
    <textarea id="description_area" name="description_area" placeholder="{{ user.description }}" style="resize:none;" rows="3" cols="40"></textarea>
    <button type="submit" class="btn btn-primary updesc">Update Description</button>
</form>
<form method="POST">
    <label for="passwd_1"></label>
    <input 
        type="password" 
        class="form-control center-elem" 
        id="passwd_1"
        name="passwd_1"
        placeholder="Edit Password"
    />
    <label for="passwd_2"></label>
    <input 
        type="password" 
        class="form-control center-elem" 
        id="passwd_2"
        name="passwd_2"
        placeholder="Confirm Password"
    />
    <button type="submit" class="btn btn-primary upswd">Update Password</button>
</form>
{% endblock %}
</div>