@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">
    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
        <i class="ci-google ms-1 me-1"></i>
        {{ __('signin.google') }}
    </button>
    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
        <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">
        <i class="ci-apple ms-1 me-1"></i>
        {{ __('signin.apple') }}
    </button>
</div>