@php
    $hasGoogle = !empty(config('services.google.client_id')) && !empty(config('services.google.client_secret'));
    $hasFacebook = !empty(config('services.facebook.client_id')) && !empty(config('services.facebook.client_secret'));
@endphp

@if ($hasGoogle || $hasFacebook)
    <div class="mt-5">
        @if ($topDivider)
            {{-- Divider --}}
            <div class="mb-5 flex items-center justify-center gap-3">
                <div class="h-px flex-1 bg-border"></div>

                <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                    {{ __('auth.social.or') }}
                </span>

                <div class="h-px flex-1 bg-border"></div>
            </div>
        @endif

        <div class="mb-5 grid grid-cols-1 gap-3">
            @if ($hasGoogle)
                {{-- Google --}}
                <a href="{{ route('user.social.redirect', ['provider' => 'google']) }}"
                    class="inline-flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm transition-all duration-200 hover:border-brand/30 hover:bg-muted/60 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:bg-card dark:hover:bg-muted/40">
                    <svg class="h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
                            fill="#4285F4" />
                        <path
                            d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
                            fill="#34A853" />
                        <path
                            d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
                            fill="#FBBC05" />
                        <path
                            d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
                            fill="#EB4335" />
                    </svg>

                    <span>
                        {{ __('auth.social.google') }}
                    </span>
                </a>
            @endif

            @if ($hasFacebook)
                {{-- Facebook --}}
                <a href="{{ route('user.social.redirect', ['provider' => 'facebook']) }}"
                    class="inline-flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3 text-sm font-medium text-foreground shadow-sm transition-all duration-200 hover:border-brand/30 hover:bg-muted/60 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:bg-card dark:hover:bg-muted/40">
                    <svg class="h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 14.9911 3.65671 19.1283 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3086 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.95 6.5625 11.5625 7.3334 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3433 19.1283 20 14.9911 20 10Z"
                            fill="#1877F2" />
                        <path
                            d="M13.8926 12.8906L14.3359 10H11.5625V8.125C11.5625 7.3334 11.95 6.5625 13.1922 6.5625H14.4531V4.10156C14.4531 4.10156 13.3086 3.90625 12.2146 3.90625C9.93047 3.90625 8.4375 5.29063 8.4375 7.79688V10H5.89844V12.8906H8.4375V19.8785C8.94883 19.9588 9.46934 20 10 20C10.5307 20 11.0512 19.9588 11.5625 19.8785V12.8906H13.8926Z"
                            fill="white" />
                    </svg>

                    <span>
                        {{ __('auth.social.facebook') }}
                    </span>
                </a>
            @endif

        </div>

        @if ($bottomDivider)
            {{-- Divider --}}
            <div class="mb-5 flex items-center justify-center gap-3">
                <div class="h-px flex-1 bg-border"></div>

                <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                    {{ __('auth.social.or') }}
                </span>

                <div class="h-px flex-1 bg-border"></div>
            </div>
        @endif
    </div>
@endif