<%- include('partials/header') %>
<%- include('partials/welcome', { 
    user: user,
    contextButtons: [
        { href: '/dashboard', text: 'Dashboard' }
    ]
}) %>

    <main class="character-creation">
    <h2>Profile Settings</h2>

    <% if (error) { %>
        <div class="error-message"><%= error %></div>
    <% } %>
    <% if (success) { %>
        <div class="success-message"><%= success %></div>
    <% } %>

    <div class="profile-forms-grid">
        <div class="form-section">
            <h3>Edit Your Information</h3>
            <form action="/profile/update" method="POST">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" value="<%= profile.username %>" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" value="<%= profile.email %>" required>
                </div>
                
                <div class="form-group">
                    <label for="default_setting">Default Setting</label>
                    <select id="default_setting" name="default_setting">
                        <% availableThemes.forEach(themeOption => { %>
                            <option value="<%= themeOption.key %>" <%= profile.default_setting === themeOption.key ? 'selected' : '' %>>
                                <%= themeOption.name %>
                            </option>
                        <% }); %>
                    </select>
                    <small>Your preferred visual theme and ruleset for the dashboard and new characters.</small>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Update Profile</button>
                </div>
            </form>
        </div>

        <div class="form-section">
            <h3>Change Your Password</h3>
            <form action="/profile/change-password" method="POST">
                <div class="form-group">
                    <label for="currentPassword">Current Password</label>
                    <input type="password" id="currentPassword" name="currentPassword" required>
                </div>
                <div class="form-group">
                    <label for="newPassword">New Password</label>
                    <input type="password" id="newPassword" name="newPassword" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Confirm New Password</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-secondary">Change Password</button>
                </div>
            </form>
        </div>
    </div>
    </main>

<%- include('partials/footer') %>