{% extends "base.html" %}
{% block title %}My Profile{% endblock %}

{% block content %}

<div class="container page-container fade-in">

    <!-- ================= HEADER ================= -->
    <div class="page-header mb-4">
        <h4><i class="bi bi-person-circle"></i> My Profile</h4>
        <p class="text-muted">Manage your account information</p>
    </div>

    <!-- ================= PROFILE SUMMARY ================= -->
    <div class="row g-3 mb-4">

        <div class="col-md-4">
            <div class="stat-card text-center">
                <i class="bi bi-person stat-icon"></i>
                <div class="stat-value mt-2">{{ user.username }}</div>
                <div class="stat-label">Username</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card text-center">
                <i class="bi bi-shield-check stat-icon"></i>
                <div class="stat-value mt-2">{{ user.role|title }}</div>
                <div class="stat-label">Account Role</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card text-center">
                <i class="bi bi-phone stat-icon"></i>
                <div class="stat-value mt-2">{{ user.phone_number }}</div>
                <div class="stat-label">Phone</div>
            </div>
        </div>

    </div>

    <!-- ================= FORM ================= -->
    <div class="card form-card">

        <h5 class="mb-3">Update Profile</h5>

        <form method="post">
            {% csrf_token %}

            <div class="row form-grid">

                <div class="col-md-6">
                    <label class="form-label">First Name</label>
                    <input type="text" name="first_name"
                           value="{{ user.first_name }}"
                           class="form-control">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Last Name</label>
                    <input type="text" name="last_name"
                           value="{{ user.last_name }}"
                           class="form-control">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="phone_number"
                           value="{{ user.phone_number }}"
                           class="form-control">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Username</label>
                    <input type="text"
                           value="{{ user.username }}"
                           class="form-control"
                           readonly>
                </div>

            </div>

            <div class="form-divider"></div>

            <button class="btn btn-primary form-submit">
                <i class="bi bi-check-circle"></i> Save Changes
            </button>

        </form>

    </div>

    <!-- ================= SECURITY ================= -->
    <div class="card form-card mt-4">

        <h5 class="mb-3">Security</h5>

        <p class="text-muted small mb-3">
            Update your password regularly to keep your account secure.
        </p>

        <a href="{% url 'password_change' %}" class="btn btn-dark">
            <i class="bi bi-lock"></i> Change Password
        </a>

    </div>

</div>

{% endblock %}