{% extends "base.html" %}

{% block content %}
<div class="mx-auto text-center">
<h1>Your Hometab</h1>
<p>Current Bookmark created:(It shows a number to count all the users total create how many bookmarks)</p>
<hr style="border: 5px dashed black;"/>

<!------  Profile Information ---------->
<p>Profile Information</p>
<div class="card">
    {% if current_user.profile_image %}
    <img src="static/uploads/{{ user.profile_image }}" style="width:100%">
    {% else %}
    <img src="static/uploads/defaultprofileimg/defaultprofileimg.png" style="width:100%">
    {% endif %}
    <h1>{{ user.username }}</h1>
    <p>{{ user.email }}</p>
</div>
<hr style="border: 5px dashed black;"/>

<!------  Change Username and Password ---------->
<p>Change Username and Password</p> 
<form method="POST">
    <label for="username">Username</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password</label><br>
    <input type="text" id="password" name="password"><br>
    <label for="password_confirm">Password(Confirm)</label><br>
    <input type="text" id="password_confirm" name="password_confirm">
    <br>
    <input type="submit" value="Submit">
</form>
<hr style="border: 5px dashed black;"/>

<!------  Upload Profile Image ---------->
<p>Upload Profile Image</p> 
<form action="" method="POST" enctype="multipart/form-data">
    <input type="file" id="profile_image" name="profile_image" accept="image/png, image/jpeg">   
    <input type="submit" value="Upload">
</form>
<hr style="border: 5px dashed black;"/>

<!------  List of bookmarks you have created ---------->
<p>List of bookmarks you have created</p>

<form action="/" method="POST">
<input type="submit" value="Download"><p>(a button for downloading their bookmarks for backup)</p>
</form>
<!------  The edit button of the page is edit_bookmark.html ---------->
<p>(Each bookmark will have an edit button for creators to manage their bookmarks (the edit button will redirect to the edit page where the user can change it to public or private, modify the link, description)</p>
<div class="card">
    <p>Automatic Icon Usage (using links from external icon sites)</p>
    <p>(Website Link)</p>
    <p>(Description)</p>
    <button type="submit">Edit</button>
</div>
{% endblock %}
</div>