<x-app-layout title="Calendar">
    <x-settings.page title="Calendar integration" description="Sync scheduled meetings to your calendar.">
        <x-settings.card title="Connections">
            <ul class="space-y-3 text-sm">
                <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                    <div>
                        <p class="font-semibold text-slate-900">Ladill Mail</p>
                        <p class="mt-0.5 text-slate-600">
                            @if ($mailConnected)
                                Connected — events sync to your mailbox calendar
                            @elseif (! $mailConfigured)
                                Not configured on this server
                            @else
                                Not connected
                            @endif
                        </p>
                    </div>
                    @if ($mailConfigured && ! $mailConnected)
                        <form method="POST" action="{{ route('meet.settings.calendar.mail') }}">
                            @csrf
                            <button type="submit" class="btn-primary shrink-0 text-sm">Connect</button>
                        </form>
                    @endif
                </li>
                <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                    <div>
                        <p class="font-semibold text-slate-900">Google Calendar</p>
                        <p class="mt-0.5 text-slate-600">{{ $googleConnected ? 'Connected' : 'Not connected' }}</p>
                    </div>
                    @if ($googleAuthUrl && ! $googleConnected)
                        <a href="{{ route('meet.settings.calendar.connect', 'google') }}" class="btn-primary shrink-0 text-sm">Connect</a>
                    @endif
                </li>
                <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                    <div>
                        <p class="font-semibold text-slate-900">Microsoft 365</p>
                        <p class="mt-0.5 text-slate-600">{{ $microsoftConnected ? 'Connected' : 'Not connected' }}</p>
                    </div>
                    @if ($microsoftAuthUrl && ! $microsoftConnected)
                        <a href="{{ route('meet.settings.calendar.connect', 'microsoft') }}" class="btn-primary shrink-0 text-sm">Connect</a>
                    @endif
                </li>
            </ul>
            <p class="mt-4 text-sm text-slate-500">Apple Calendar: use iCal download on each meeting detail page.</p>
        </x-settings.card>
    </x-settings.page>
</x-app-layout>
