<x-base-layout>

    <!--begin::Row-->
    <div class="row gy-5 g-xl-8">
        <!--begin::Col-->
        <div class="col-xxl-8">
            <div class="card shadow-sm mb-2">
                <div class="card-header">
                    <h3 class="card-title">Register</h3>
                </div>
                <div class="card-body">
                    @if (count($errors) > 0)
                    <!--begin::Alert-->
                    <div class="alert alert-danger d-flex align-items-center p-5 mb-10">
                        <span class="svg-icon svg-icon-2hx svg-icon-danger me-4">
                            <i class="fad fa-times-circle"></i>
                        </span>
                        <div class="d-flex flex-column">
                            <h4 class="mb-1 text-danger">Error</h4>
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <!--end::Alert-->
                    @endif
                    <!--begin::Signup Form-->
                    <form method="POST" action="{{ route('register') }}" class="form w-100" novalidate="novalidate" id="kt_sign_up_form">
                        @csrf

                        <!--begin::Input group-->
                        <div class="fv-row mb-5">
                            <!--begin::Col-->
                            <div class="col-xl-6">
                                <label class="form-label fw-bolder text-dark fs-6">{{ __('Username') }}</label>
                                <input class="form-control form-control-lg form-control-solid" type="text" name="username" maxlength="16" autocomplete="off" value="{{ old('username') }}"/>
                            </div>
                            <!--end::Col-->
                        </div>

                        <!--begin::Input group-->
                        <div class="fv-row mb-5">
                            <!--begin::Col-->
                            <div class="col-xl-6">
                                <label class="form-label fw-bolder text-dark fs-6">{{ __('Email') }}</label>
                                <input class="form-control form-control-lg form-control-solid" type="email" name="email" autocomplete="off" value="{{ old('email') }}"/>
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->

                        <!--begin::Input group-->
                        <div class="mb-5 fv-row" data-kt-password-meter="true">
                            <!--begin::Wrapper-->
                            <div class="mb-1">
                                <!--begin::Col-->
                                <div class="col-xl-6">
                                    <!--begin::Label-->
                                    <label class="form-label fw-bolder text-dark fs-6">
                                        {{ __('Password') }}
                                    </label>
                                    <!--end::Label-->

                                    <!--begin::Input wrapper-->
                                    <div class="position-relative mb-3">
                                        <input class="form-control form-control-lg form-control-solid" type="password" name="password" autocomplete="new-password"/>

                                        <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                            <i class="bi bi-eye-slash fs-2"></i>
                                            <i class="bi bi-eye fs-2 d-none"></i>
                                        </span>
                                    </div>
                                    <!--end::Input wrapper-->

                                    <!--begin::Meter-->
                                    <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                        <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                                    </div>
                                    <!--end::Meter-->
                                </div>
                            </div>
                            <!--end::Wrapper-->

                            <!--begin::Hint-->
                            <div class="text-muted">
                                {{ __('Use 16 or more characters with a mix of letters, numbers & symbols.') }}
                            </div>
                            <!--end::Hint-->
                        </div>
                        <!--end::Input group--->

                        <!--begin::Input group-->
                        <div class="fv-row mb-5">
                            <!--begin::Col-->
                            <div class="col-xl-6">
                                <label class="form-label fw-bolder text-dark fs-6">{{ __('Confirm Password') }}</label>
                                <input class="form-control form-control-lg form-control-solid" type="password" name="password_confirmation" autocomplete="off"/>
                            </div>
                        </div>
                        <!--end::Input group-->

                        <!--begin::Input group-->
                        <div class="fv-row mb-5">
                            <label class="form-check form-check-custom form-check-solid form-check-inline">
                                <input class="form-check-input" type="checkbox" name="toc" value="1"/>
                                <span class="form-check-label fw-bold text-gray-700 fs-6">
                                {{ __('I Agree to the ') }} <a href="/terms-of-service" class="ms-1 link-primary">{{ __('Terms of Service') }}</a>.
                                </span>
                            </label>
                        </div>
                        <!--end::Input group-->

                        <!--begin::Actions-->
                        <div class="text-left">
                            <button type="submit" id="kt_sign_up_submit" class="btn btn-lg btn-primary">
                                @include('partials.general._button-indicator')
                            </button>
                        </div>
                        <!--end::Actions-->
                    </form>
                    <!--end::Signup Form-->
                </div>
            </div>
        </div>
        <!--end::Col-->

        <!--begin::Col-->
        <div class="col-xxl-4">
            @if (Auth::check())
            {{ theme()->getView('partials/general/_donate-block') }}
            @endif
            {{ theme()->getView('partials/general/_recent-user-updates-block') }}
            {{ theme()->getView('partials/general/_most-popular-games-block') }}
        </div>
        <!--end::Col-->
    </div>
    <!--end::Row-->

</x-base-layout>
