@php($container = 'max-w-6xl')
@extends('layouts/auth')
@section('title', __('auth.register.title'))
@section('content')
    <div class="p-4 sm:p-7">
        <div class="text-center">
            <h1 class="block text-2xl font-bold text-gray-800 dark:text-white">{{ __('auth.register.heading') }}</h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                {{ __('auth.register.already') }}
                <a class="text-indigo-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="{{ route('login') }}">
                    {{ __('auth.login.login') }}
                </a>
            </p>
        </div>

        <div class="mt-5">
            @include('shared.alerts')
            @if ($providers->isNotEmpty())
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

            @foreach ($providers as $provider)
                <a href="{{ route('socialauth.authorize', $provider->name) }}" class="mt-2 w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">

                    <img src="{{ $provider->provider()->logo() }}" alt="{{ $provider->provider()->title() }}" class="w-5 h-5" />
                    {{ __('socialauth::messages.register_with', ['provider' => $provider->provider()->title()]) }}
                </a>
            @endforeach
            </div>
            @endif
                @if ($providers->isNotEmpty())

                <div class="py-3 flex items-center text-xs text-gray-400 uppercase before:flex-[1_1_0%] before:border-t before:border-gray-200 before:me-6 after:flex-[1_1_0%] after:border-t after:border-gray-200 after:ms-6 dark:text-gray-500 dark:before:border-gray-600 dark:after:border-gray-600">
                    {{ trans("global.or") }}</div>
            @endif
                @include('shared.auth.register')

        </div>
    </div>

@endsection