@extends("Site.Layouts.blank")
@section ("content")

    <main class="bg-green-dark min-h-[88vh] flex justify-center items-center py-12">

        <div class="flex flex-col gap-4  w-[90%] lg:w-[50%]">
            <section class="text-green-light">
                <h1 class="mb-3 font-semibold text-[34px]">Sign Up</h1>
                <p class="font-light">Let’s get you all st up so you can access your personal account.</p>
            </section>

            <section>

                <register-form
                    form_action="{{urlLang('auth/register_action')}}"
                >

                </register-form>

            </section>

            <div class="mt-4 text-center">
                <button class="text-green-light">
                    Already have an account? <a href="{{urlLang('auth/login')}}" class="text-[#FF8682]">Login</a>
                </button>
            </div>

            <section class="mt-5 flex justify-between items-center gap-3">
                <div class="flex-1 border-t border-green-600"> </div>
                <p class="text-[#00FFA6] font-light text-[12px]"> Or Sign up with </p>
                <div class="flex-1 border-t border-green-600"> </div>
            </section>

            <section class="mt-4 flex justify-center items-center gap-3  ">
{{--                <a href="" class="flex-1 border border-green-600 text-center py-3 flex justify-center items-center rounded">--}}
{{--                    <img src="{{asset('site_assets/images/icons/facebook_login.svg')}}" alt="facebook login">--}}
{{--                </a>--}}

            <div class=" w-[50%]"> <!-- flex-1 -->
                <a href="{{ url('auth/google') }}" class=" border border-green-600 text-center py-3 flex justify-center items-center rounded">
                    <img src="{{asset('site_assets/images/icons/google_login.svg')}}" alt="google login">
                </a>
            </div>

{{--                <a href="" class="flex-1 border border-green-600 text-center py-3 flex justify-center items-center rounded">--}}
{{--                    <img src="{{asset('site_assets/images/icons/apple_login.svg')}}" alt="apple login">--}}
{{--                </a>--}}
            </section>

        </div>

    </main>

@endsection