<%- include('partials/layout_start', { activePage: 'profile', pageTitle: 'Admin Profile' }) %>

<div class="admin-section">
    <h2>Update Profile</h2>
    
    <% if (error) { %>
        <div style="background: #ef4444; color: white; padding: 10px; margin-bottom: 20px; border-radius: 4px;">
            <i class="fas fa-exclamation-circle"></i> <%= error %>
        </div>
    <% } %>
    <% if (success) { %>
        <div style="background: #10b981; color: white; padding: 10px; margin-bottom: 20px; border-radius: 4px;">
            <i class="fas fa-check-circle"></i> <%= success %>
        </div>
    <% } %>

    <form action="/admin/profile" method="POST" style="background: #1e293b; padding: 20px; border-radius: 8px;">
        
        <div style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; color: #94a3b8;">Username</label>
            <input type="text" name="username" value="<%= user ? user.username : '' %>" required style="width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 4px;">
        </div>

        <hr style="border-color: #334155; margin: 25px 0;">

        <div style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; color: #94a3b8;">Current Password <span style="color: #ef4444; font-size: 0.8rem;">(Required to save changes)</span></label>
            <input type="password" name="current_password" required style="width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 4px;">
        </div>

        <div style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; color: #94a3b8;">New Password <span style="color: #cbd5e1; font-size: 0.8rem;">(Leave blank to keep current password)</span></label>
            <input type="password" name="new_password" style="width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 4px;">
        </div>

        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; color: #94a3b8;">Confirm New Password</label>
            <input type="password" name="confirm_password" style="width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 4px;">
        </div>

        <button type="submit" class="btn-primary" style="background: #f59e0b; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold;">Save Changes</button>
    </form>
</div>

<%- include('partials/layout_end') %>
