@php
    $text = isset($register) ? 'Register' : 'Login';
@endphp

<div class="d-flex flex-wrap gap-3 mb-3">
    @if (@gs('socialite_credentials')->google->status == Status::ENABLE)
        <a href="{{ route('user.social.login', 'google') }}" class="btn flex-grow-1 social-login-btn">
            <img src="{{ asset($activeTemplateTrue . 'images/google.svg') }}" alt="Google">
            <span>@lang("$text With Google")</span>
        </a>
    @endif

    @if (@gs('socialite_credentials')->facebook->status == Status::ENABLE)
        <a href="{{ route('user.social.login', 'facebook') }}" class="btn flex-grow-1 social-login-btn">
            <img src="{{ asset($activeTemplateTrue . 'images/facebook.svg') }}" alt="Facebook">
            <span>@lang("$text With Facebook")</span>
        </a>
    @endif

    @if (@gs('socialite_credentials')->linkedin->status == Status::ENABLE)
        <a href="{{ route('user.social.login', 'linkedin') }}" class="btn flex-grow-1 social-login-btn">
            <img src="{{ asset($activeTemplateTrue . 'images/linkdin.svg') }}" alt="Linkedin">
            <span>@lang("$text With Linkedin")</span>
        </a>
    @endif
</div>

@if (
    @gs('socialite_credentials')->linkedin->status ||
        @gs('socialite_credentials')->facebook->status == Status::ENABLE ||
        @gs('socialite_credentials')->google->status == Status::ENABLE)
    <div class="mb-3">
        <span class="d-block text-white text-center">
            @lang('OR')
        </span>
    </div>
@endif
@push('style')
    <style>
        .social-login-btn {
            display: inline-flex;
            align-content: center;
            justify-content: center;
            gap: 8px;
            padding: 16px 16px;
            color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .social-login-btn:hover,
        .social-login-btn:focus {
            color: rgba(255, 255, 255, 1);
            border-color: rgba(255, 255, 255, 1);
        }
    </style>
@endpush