{% extends "base.html" %}
{% block title %}My Profile · WageWise Neo{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <div class="eyebrow">Account</div>
        <h1>My Profile</h1>
    </div>
</div>

<div class="panel" style="max-width:420px;">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--color-rule);">
        <div><div class="meta">Name</div><div>{{ current_user.name }}</div></div>
        <div><div class="meta">Username</div><div style="font-family:var(--font-data);">{{ current_user.username }}</div></div>
        <div><div class="meta">Role</div><div><span class="stamp neutral">{{ current_user.role }}</span></div></div>
    </div>

    <h3>Change Password</h3>
    {% if error %}
    <div style="background:var(--color-due-bg);color:var(--color-due);border:1px solid var(--color-due);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:16px;font-size:13px;">
        {{ error }}
    </div>
    {% endif %}

    <form method="post" style="margin-top:16px;">
        <div class="field" style="margin-bottom:14px;">
            <label>Current Password</label>
            <input type="password" name="current_password" required autocomplete="current-password">
        </div>
        <div class="field" style="margin-bottom:14px;">
            <label>New Password</label>
            <input type="password" name="new_password" required minlength="6" autocomplete="new-password">
        </div>
        <div class="field" style="margin-bottom:20px;">
            <label>Confirm New Password</label>
            <input type="password" name="confirm_password" required autocomplete="new-password">
        </div>
        <div class="actions-row">
            <button type="submit" class="btn btn-primary">Update Password</button>
            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

{% endblock %}