{% extends "base.html" %}

{% block title %}Profile{% endblock %}

{% block content %}
<div class="container">
    <h1>User Profile</h1>
    <p>Username: <span id="profile-username"></span></p>
    <p>Email: <span id="profile-email"></span></p>
    <button id="edit-profile-button">Edit Profile</button>

    <div id="edit-profile-form" style="display:none;">
        <h2>Edit Profile</h2>
        <form>
            <div class="form-group">
                <label for="edit-username">Username:</label>
                <input type="text" id="edit-username" name="username">
            </div>
            <div class="form-group">
                <label for="edit-email">Email:</label>
                <input type="email" id="edit-email" name="email">
            </div>
            <div class="form-group">
                <label for="edit-password">New Password:</label>
                <input type="password" id="edit-password" name="password">
            </div>
            <button type="submit">Save Changes</button>
        </form>
    </div>
</div>
{% endblock %}