<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between gap-4 rounded-2xl border border-sky-200/70 bg-gradient-to-r from-sky-50 to-green-50 px-5 py-4">
            <div>
                <h2 class="text-xl font-semibold leading-tight text-sky-900">{{ $paymentMethod->name }}</h2>
                <p class="mt-1 text-sm text-sky-700">{{ __('Payment gateway configuration summary.') }}</p>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('admin.payment-methods.edit', $paymentMethod) }}" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700">{{ __('Edit') }}</a>
                <a href="{{ route('admin.payment-methods.index') }}" class="rounded-lg bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200">{{ __('Back') }}</a>
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
            <div class="rounded-2xl border border-sky-200/70 bg-white p-6 shadow-sm">
                <dl class="grid gap-6 md:grid-cols-2">
                    <div><dt class="text-sm text-gray-500">{{ __('Provider') }}</dt><dd class="mt-1 text-gray-900">{{ ucfirst($paymentMethod->provider) }}</dd></div>
                    <div><dt class="text-sm text-gray-500">{{ __('Status') }}</dt><dd class="mt-1 text-gray-900">{{ $paymentMethod->is_active ? __('Active') : __('Inactive') }}</dd></div>
                    <div class="md:col-span-2"><dt class="text-sm text-gray-500">{{ __('Description') }}</dt><dd class="mt-1 text-gray-900">{{ $paymentMethod->description ?: __('No description') }}</dd></div>
                </dl>

                <div class="mt-8 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                    {{ __('Credentials stay hidden by design. Use the edit form to replace or rotate keys safely.') }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
