@extends('api_panel.layouts.app')

@section('title', t('apipanel-register-title'))

@section('content')
    <div class="row justify-content-center">
        <div class="col-12 col-md-7 col-lg-5">
            <div class="apipanel-card">
                <h1 class="apipanel-h1">{{ t('apipanel-register-title') }}</h1>
                <p class="apipanel-muted mb-4">{{ t('apipanel-register-subtitle') }}</p>

                <form method="POST" action="{{ route('apipanel.register.post') }}" novalidate>
                    @csrf

                    <div class="mb-3">
                        <label class="apipanel-label" for="name">{{ t('apipanel-field-name') }}</label>
                        <input type="text" id="name" name="name" required maxlength="120" autocomplete="name"
                               class="apipanel-input" value="{{ old('name') }}">
                    </div>

                    <div class="mb-3">
                        <label class="apipanel-label" for="email">{{ t('apipanel-field-email') }}</label>
                        <input type="email" id="email" name="email" required autocomplete="email"
                               class="apipanel-input" value="{{ old('email') }}">
                    </div>

                    <div class="mb-3">
                        <label class="apipanel-label" for="password">{{ t('apipanel-field-password') }}</label>
                        <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password"
                               class="apipanel-input">
                        <small class="apipanel-muted">{{ t('apipanel-register-password-hint') }}</small>
                    </div>

                    <div class="mb-3">
                        <label class="apipanel-label" for="password_confirmation">{{ t('apipanel-field-password-confirm') }}</label>
                        <input type="password" id="password_confirmation" name="password_confirmation" required
                               autocomplete="new-password" class="apipanel-input">
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="kvkk" name="kvkk" value="1" required
                               {{ old('kvkk') ? 'checked' : '' }}>
                        <label class="form-check-label apipanel-muted" for="kvkk">{{ t('apipanel-register-kvkk') }}</label>
                    </div>

                    <button type="submit" class="apipanel-btn apipanel-btn-primary w-100">{{ t('apipanel-register-submit') }}</button>
                </form>

                <div class="apipanel-divider"><span>{{ t('apipanel-or') }}</span></div>

                <a href="{{ route('apipanel.google.redirect') }}" class="apipanel-btn apipanel-btn-google w-100">
                    {{ t('apipanel-register-google') }}
                </a>

                <p class="apipanel-note mt-4 mb-0">{{ t('apipanel-register-email-verify-note') }}</p>

                <p class="text-center mt-3 mb-0 apipanel-muted">
                    {{ t('apipanel-register-have-account') }}
                    <a href="{{ route('apipanel.login') }}">{{ t('apipanel-nav-login') }}</a>
                </p>
            </div>
        </div>
    </div>
@endsection