<!DOCTYPE html>
<html lang="{{ get_admin_language() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ t('accept_invite.welcome') }} - AliothPress</title>
    <link rel="stylesheet" href="/static/css/admin.css">
</head>
<body class="auth-page">
    <div class="invite-card">
        <div class="invite-header">
            <h1>{{ t('accept_invite.welcome') }}</h1>
            <p>{{ t('accept_invite.subtitle') }}</p>
        </div>
        <div class="invite-body">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <div class="role-info">
                {{ t('accept_invite.invited_as', role=t('users.role_' + user.role), email=user.email) }}
            </div>
            
            <form method="POST" action="{{ url_for('accept_invite', token=token) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <label for="username">{{ t('accept_invite.username') }}</label>
                    <input type="text" id="username" name="username" required placeholder="{{ t('accept_invite.username_placeholder') }}" autocomplete="username">
                    <div class="help-text">{{ t('accept_invite.username_help') }}</div>
                </div>
                
                <div class="form-group">
                    <label for="display_name">{{ t('accept_invite.display_name') }}</label>
                    <input type="text" id="display_name" name="display_name" placeholder="{{ t('accept_invite.display_name_placeholder') }}">
                    <div class="help-text">{{ t('accept_invite.display_name_help') }}</div>
                </div>
                
                <div class="form-group">
                    <label for="password">{{ t('accept_invite.password') }}</label>
                    <input type="password" id="password" name="password" required minlength="8" placeholder="{{ t('accept_invite.password_placeholder') }}">
                </div>
                
                <div class="form-group">
                    <label for="confirm_password">{{ t('accept_invite.confirm_password') }}</label>
                    <input type="password" id="confirm_password" name="confirm_password" required placeholder="{{ t('accept_invite.confirm_placeholder') }}">
                </div>
                
                <button type="submit">{{ t('accept_invite.create_account') }}</button>
            </form>
        </div>
    </div>
</body>
</html>
