@section('title')
    {{ 'Integrations - Reply reviews' }}
@endsection

<x-app-layout>
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-6">Available Integrations</h1>
        @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($integrations as $integration)
                <div class="bg-white shadow-lg rounded-lg p-6 text-center">
                    <h2 class="text-xl font-semibold text-gray-700">{{ $integration }}</h2>
                    <a href="{{ route('integration.authenticate', parameters: ['app' => formatName($integration)]) }}" 
                       class="mt-4 inline-block bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Connect</a>
                </div>
            @endforeach
        </div>
    </div>
</x-app-layout>