@extends('layouts.app')
@section('title', __('ui.auth_complete_profile_title').' — Coaster World')
@section('content')
<section class="auth-page">
    <div class="auth-card">
        <span class="eyebrow">{{ __('ui.auth_account') }}</span>
        <h1>{{ __('ui.auth_complete_profile_title') }}</h1>
        <p>{{ __('ui.auth_complete_profile_intro') }}</p>
        <div class="account-settings-readonly">
            <span>{{ __('ui.auth_email') }}</span>
            <strong>{{ $pending['email'] }}</strong>
        </div>
        <form method="post" action="{{ route('social-auth.complete.store') }}" class="auth-form">
            @csrf
            <label>{{ __('ui.auth_name') }}<input type="text" name="name" value="{{ old('name', $suggestedName) }}" required autocomplete="name"></label>
            @error('name')<small class="form-error">{{ $message }}</small>@enderror
            <label>{{ __('ui.account_settings_username') }}<input type="text" name="username" value="{{ old('username', $suggestedUsername) }}" required maxlength="50" autocomplete="username" spellcheck="false"></label>
            <small class="form-help">{{ __('ui.account_settings_username_help') }}</small>
            @error('username')<small class="form-error">{{ $message }}</small>@enderror
            <label class="account-toggle-row">
                <input type="checkbox" name="legal_accepted" value="1" required @checked(old('legal_accepted'))>
                <span>
                    <strong>{{ __('ui.auth_legal_accept') }}</strong>
                    <small>{!! __('ui.auth_legal_accept_help', ['terms' => '<a href="'.route('site.terms').'" target="_blank">'.__('site.footer.terms').'</a>', 'privacy' => '<a href="'.route('site.privacy').'" target="_blank">'.__('site.footer.privacy').'</a>']) !!}</small>
                </span>
            </label>
            @error('legal_accepted')<small class="form-error">{{ $message }}</small>@enderror
            <button class="button button-primary" type="submit">{{ __('ui.auth_complete_profile_action') }}</button>
        </form>
    </div>
</section>
@endsection