@if (count($providers))

     <div class="flex items-center gap-2">
        <span class="border-t border-border w-full"></span>
        <span class="text-xs text-muted-foreground font-medium uppercase">
            {{ __('ui.or') }}
        </span>
        <span class="border-t border-border w-full"></span>
    </div>


    <div class="grid grid-cols-2 gap-2.5">
        @foreach ($providers as $provider)
            <a class="kt-btn kt-btn-outline justify-center" href="#">
                @if ($provider['key'] === 'apple')
                    <img alt="" class="size-3.5 shrink-0 dark:block" src="{{ asset('assets/media/brand-logos/apple-black.svg') }}">
                    <img alt="" class="size-3.5 shrink-0 light:hidden"src="{{ asset('assets/media/brand-logos/apple-white.svg') }}">
                @else
                    <img alt="" class="size-3.5 shrink-0"
                         src="{{ asset('assets/media/brand-logos/' . $provider['key'] . '.svg') }}">
                @endif

                {{ __('Use :provider', ['provider' => $provider['label']]) }}
            </a>
        @endforeach
    </div>

@endif