<div class="auth-card">
    <div class="auth-header">
        <i class="fas fa-server auth-logo"></i>
        <h1>ServerManager</h1>
        <p>Create your account</p>
    </div>

    <?php if ($flash = \ServerManager\Core\Session::getFlash('error')): ?>
        <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> <?= htmlspecialchars($flash[0]) ?></div>
    <?php endif; ?>

    <form method="POST" action="/register" class="auth-form" id="registerForm">
        <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">

        <div class="form-group">
            <label for="username"><i class="fas fa-user"></i> Username</label>
            <input type="text" id="username" name="username" class="form-input" placeholder="Choose a username" required autofocus autocomplete="username">
        </div>

        <div class="form-group">
            <label for="email"><i class="fas fa-envelope"></i> Email</label>
            <input type="email" id="email" name="email" class="form-input" placeholder="your@email.com" required autocomplete="email">
        </div>

        <div class="form-group">
            <label for="password"><i class="fas fa-lock"></i> Password</label>
            <div class="input-group">
                <input type="password" id="password" name="password" class="form-input" placeholder="At least 8 characters" required autocomplete="new-password">
                <button type="button" class="input-toggle-password" tabindex="-1"><i class="fas fa-eye"></i></button>
            </div>
        </div>

        <div class="form-group">
            <label for="confirm_password"><i class="fas fa-lock"></i> Confirm Password</label>
            <input type="password" id="confirm_password" name="confirm_password" class="form-input" placeholder="Repeat password" required autocomplete="new-password">
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-user-plus"></i> Create Account</button>
        </div>

        <div class="auth-footer">
            <p>Already have an account? <a href="/login">Sign in</a></p>
        </div>
    </form>
</div>
