<?php $user = $user ?? []; ?>

<div class="page-header">
    <h1 class="page-title">My Profile</h1>
    <p class="page-subtitle">Manage your account settings</p>
</div>

<div class="card" style="max-width: 600px;">
    <div class="card-header">
        <h2><i class="fas fa-user-circle"></i> Account Information</h2>
    </div>
    <div class="card-body">
        <dl class="details-list">
            <dt>Username</dt>
            <dd><?= htmlspecialchars($user['username'] ?? '') ?></dd>
            <dt>Role</dt>
            <dd><span class="badge badge-info"><?= htmlspecialchars(ucfirst($user['role'] ?? '')) ?></span></dd>
            <dt>Last Login</dt>
            <dd><?= htmlspecialchars($user['last_login_at'] ?? 'Never') ?></dd>
            <dt>Created</dt>
            <dd><?= htmlspecialchars($user['created_at'] ?? '') ?></dd>
        </dl>
    </div>
</div>

<div class="card" style="max-width: 600px; margin-top: 1rem;">
    <div class="card-header">
        <h2><i class="fas fa-edit"></i> Update Profile</h2>
    </div>
    <div class="card-body">
        <form method="POST" action="/profile" class="form">
            <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">

            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" class="form-input"
                       value="<?= htmlspecialchars($user['email'] ?? '') ?>" required>
            </div>

            <div class="form-section">
                <h3>Change Password</h3>
                <div class="form-group">
                    <label for="current_password">Current Password</label>
                    <input type="password" id="current_password" name="current_password" class="form-input" required>
                </div>
                <div class="form-group">
                    <label for="new_password">New Password (leave blank to keep current)</label>
                    <input type="password" id="new_password" name="new_password" class="form-input"
                           placeholder="Minimum 8 characters" minlength="8">
                </div>
                <div class="form-group">
                    <label for="confirm_password">Confirm New Password</label>
                    <input type="password" id="confirm_password" name="confirm_password" class="form-input">
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Update Profile
                </button>
            </div>
        </form>
    </div>
</div>
