<%- include('../partials/header', { title, user }) %>
<%- include('../partials/sidebar', { path }) %>

<!-- Main Content -->
<main class="main-content">
    <div class="profile-header-banner">
        <div class="profile-header-content">
            <div class="profile-avatar-large">
                <%= user.username.charAt(0).toUpperCase() %>
            </div>
            <div class="profile-header-info">
                <h1><%= user.username %></h1>
                <span class="profile-role-badge <%= user.role %>"><%= user.role %></span>
            </div>
        </div>
        <div class="profile-stats">
            <div class="stat-item">
                <span class="stat-label">User ID</span>
                <span class="stat-value"><%= user.id %></span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
                <span class="stat-label">Role</span>
                <span class="stat-value"><%= user.role %></span>
            </div>
        </div>
    </div>

    <div class="profile-container">
        <!-- Update Username Form -->
        <div class="profile-card">
            <div class="card-header">
                <h3><i class="fas fa-user"></i> Update Username</h3>
            </div>
            <form id="update-username-form" class="profile-form">
                <div class="form-group">
                    <label for="current-username">Current Username</label>
                    <input type="text" id="current-username" value="<%= user.username %>" disabled>
                </div>
                <div class="form-group">
                    <label for="new-username">New Username</label>
                    <input type="text" id="new-username" placeholder="Enter new username" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save"></i> Update Username
                    </button>
                </div>
            </form>
        </div>

        <!-- Change Password Form -->
        <div class="profile-card">
            <div class="card-header">
                <h3><i class="fas fa-lock"></i> Change Password</h3>
            </div>
            <form id="change-password-form" class="profile-form">
                <div class="form-group">
                    <label for="current-password">Current Password</label>
                    <input type="password" id="current-password" placeholder="Enter current password" required>
                </div>
                <div class="form-group">
                    <label for="new-password">New Password</label>
                    <input type="password" id="new-password" placeholder="Enter new password" required>
                </div>
                <div class="form-group">
                    <label for="confirm-password">Confirm New Password</label>
                    <input type="password" id="confirm-password" placeholder="Confirm new password" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-key"></i> Change Password
                    </button>
                </div>
            </form>
        </div>
    </div>
</main>

<%- include('../partials/footer') %>
