@extends('layouts.auth')
@section('title', __('Sign Up'))
@section('side_title', __('Start learning — or start teaching — today.'))

@section('content')
    <h3 class="fw-bold mb-1" style="letter-spacing:-.03em">{{ __('Create your account') }}</h3>
    <p class="text-muted mb-4">{{ __('Join thousands of learners today. It only takes a minute.') }}</p>

    @if(! empty($inviter))
        <div class="alert alert-success small"><i class="bi bi-gift me-1"></i>{{ __(':name invited you — you both earn balance credit when you join!', ['name' => $inviter->name]) }}</div>
    @endif

    <form method="POST" action="{{ route('register') }}">
        @csrf
        <input type="hidden" name="invite" value="{{ old('invite', $invite ?? '') }}">
        <div class="mb-3" @if(setting('instructor_signup_enabled', '1') !== '1') hidden @endif>
            <label class="form-label d-block">{{ __('I want to join as') }}</label>
            <div class="lf-role-pick">
                <input type="radio" name="role" id="role-student" value="student" {{ old('role', 'student') === 'student' ? 'checked' : '' }}>
                <label for="role-student"><i class="bi bi-mortarboard"></i><span><span class="d-block fw-bold small">{{ __('Student') }}</span><span class="text-muted" style="font-size:.74rem">{{ __('Learn courses') }}</span></span></label>
                <input type="radio" name="role" id="role-instructor" value="instructor" {{ old('role') === 'instructor' ? 'checked' : '' }}>
                <label for="role-instructor"><i class="bi bi-easel"></i><span><span class="d-block fw-bold small">{{ __('Instructor') }}</span><span class="text-muted" style="font-size:.74rem">{{ __('Teach & sell courses') }}</span></span></label>
            </div>
        </div>
        <div class="mb-3">
            <label class="form-label">{{ __('Full name') }}</label>
            <input type="text" name="name" value="{{ old('name') }}" class="form-control" placeholder="{{ __('Your name') }}" autocomplete="name" required autofocus>
        </div>
        <div class="mb-3">
            <label class="form-label">{{ __('Email address') }}</label>
            <input type="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="you@example.com" autocomplete="email" required>
        </div>
        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label">{{ __('Password') }}</label>
                <div class="lf-pass-wrap">
                    <input type="password" name="password" class="form-control" placeholder="{{ __('Min. 8 characters') }}" autocomplete="new-password" minlength="8" required>
                    <button type="button" class="lf-pass-toggle" aria-label="{{ __('Show password') }}"><i class="bi bi-eye"></i></button>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">{{ __('Confirm') }}</label>
                <input type="password" name="password_confirmation" class="form-control" placeholder="{{ __('Repeat your password') }}" autocomplete="new-password" minlength="8" required>
            </div>
        </div>
        <p class="text-muted mb-3" style="font-size:.78rem">{{ __('By creating an account you agree to our') }} <a href="{{ url('/terms') }}">{{ __('Terms') }}</a> {{ __('and') }} <a href="{{ url('/privacy') }}">{{ __('Privacy Policy') }}</a>.</p>
        <button type="submit" class="btn btn-primary btn-lg w-100">{{ __('Create account') }} <i class="bi bi-arrow-right ms-1"></i></button>
    </form>

    @include('partials.sso-buttons')

    <p class="text-center text-muted mt-4 mb-0">
        {{ __('Already have an account?') }} <a href="{{ route('login') }}" class="fw-semibold">{{ __('Login') }}</a>
    </p>
@endsection