{% extends "_base.html" %}

{% block title %}Account Details - Lab 03{% endblock %}

{% block content %}
<div class="content-box main-content">
    <h1 class="main-title">Account Details</h1>

    <p>For a complete experience on this website, please enter your personal details in the form below:</p>

    <form method="post" class="account-form" enctype="multipart/form-data">
      <div class="mb-3 text-center">
        <img src="/public/images/profile/profile.jpg" alt="Profile Picture" class="img-thumbnail" style="max-width: 200px; display: block; margin: 0 auto 15px;" onerror="this.src='/public/images/maestrul.jpg';">
        <label for="profile_pic" class="form-label">Update Profile Picture</label>
        <input type="file" class="form-control" id="profile_pic" name="profile_pic">
      </div>
      <div class="mb-3">
        <label for="first_name" class="form-label">First Name</label>
        <input type="text" class="form-control" id="first_name" name="first_name" value="{{ first_name }}">
      </div>
      <div class="mb-3">
        <label for="last_name" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="last_name" name="last_name" value="{{ last_name }}">
      </div>
      <div class="mb-3">
        <label for="age" class="form-label">Age</label>
        <input type="text" class="form-control" id="age" name="age" value="{{ age }}">
      </div>
      <button type="submit" class="btn btn-primary">Save Details</button>
    </form>
</div>
{% endblock %}