@props(['showDivider' => true])

@if ($showDivider)
    <!-- Divider -->
    <div class="d-flex align-items-center my-4">
        <hr class="w-100 m-0" />
        <span class="text-body-emphasis fw-medium text-nowrap mx-4">{{ __('signin.or_continue_with') }}</span>
        <hr class="w-100 m-0" />
    </div>
@endif

<!-- Social login -->
<div class="d-flex flex-column flex-sm-row gap-3 pb-4 mb-3 mb-lg-4">
    <form action="{{ route('login.google') }}" method="GET" class="w-100">
        <button type="submit" class="btn btn-lg btn-outline-secondary w-100 px-2">
            <i class="ci-google ms-1 me-1"></i>
            {{ __('signin.google') }}
        </button>
    </form>
    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button" disabled>
        <i class="ci-facebook ms-1 me-1"></i>
        {{ __('signin.facebook') }}
    </button>
    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button" disabled>
        <i class="ci-apple ms-1 me-1"></i>
        {{ __('signin.apple') }}
    </button>
</div>
