@extends('layouts.guest')

@section('title', 'Connexion')

@section('content')
    <div class="w-full max-w-md rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
        <img
            src="{{ asset('images/logo.png') }}"
            alt="Hectare"
            class="mx-auto mb-3 h-[80px] w-[80px] object-contain sm:mb-4"
        />

        <h1 class="text-center text-2xl font-semibold tracking-wide text-slate-900 sm:text-3xl">
            HECTARION
        </h1>
        <p class="mt-1 text-center text-sm font-medium text-slate-500">
            by Hectare Groupe
        </p>

        @if ($errors->any())
            <div class="mt-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
                <ul class="list-inside list-disc space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="mt-8">
            <a
                href="{{ route('auth.microsoft') }}"
                class="flex w-full items-center justify-center gap-3 rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm font-medium text-slate-800 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
            >
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" aria-hidden="true">
                    <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
                    <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
                    <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
                    <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
                </svg>
                Se connecter avec Microsoft
            </a>
        </div>
    </div>
@endsection