@props(['check', 'key'])
{{--
    Die Antwort einer Prüfung, direkt unter dem Knopf, der sie ausgelöst hat.

    Vorher stand dieser Block ganz unten auf der Seite — hinter allen Karten und
    hinter dem Speichern-Knopf. Der Testknopf sitzt oben in der Stripe-Karte;
    wer ihn drückte, sah die Antwort nie, weil sie ausserhalb des Bildschirms
    erschien. Gemeldet wurde das als „der Knopf tut nichts", und genau so sah es
    aus.

    Und der Block ging von einem STRIPE-Ergebnis aus: `account`, `live`,
    `webhooks`. Ein DnsTokenCheck-Ergebnis hat davon nichts — und sein Erfolg
    heisst `writable`, lief also in genau diesen Zweig. Deshalb wird hier nach
    dem geprüften Eintrag verzweigt statt nach `ok`.
--}}
<div class="mt-4 rounded-lg border border-line bg-surface-2 p-4">
    <h4 class="text-sm font-semibold text-ink">{{ __('secrets.check_title') }}</h4>

    @if (! $check['ok'])
        <x-ui.alert variant="danger" class="mt-3">{{ __('secrets.check_'.$check['reason']) }}</x-ui.alert>
    @elseif ($key !== 'stripe.secret')
        {{-- Jede andere Prüfung sagt genau eine Sache: es geht. Was sie im
             Fehlerfall zu sagen hat, steht ausführlich auf der
             Bereitschaftsseite, die dafür die Stelle ist. --}}
        <x-ui.alert variant="success" class="mt-3">{{ __('secrets.check_'.$check['reason']) }}</x-ui.alert>
    @else
        <dl class="mt-3 space-y-1 text-sm">
            <div class="flex gap-2"><dt class="text-muted">{{ __('secrets.check_account') }}:</dt>
                <dd class="font-mono text-body">{{ $check['account'] }}{{ $check['business'] ? ' · '.$check['business'] : '' }}</dd></div>
            <div class="flex gap-2"><dt class="text-muted">{{ __('secrets.check_mode') }}:</dt>
                <dd class="{{ $check['live'] ? 'font-medium text-warning' : 'text-body' }}">
                    {{ $check['live'] ? __('secrets.mode_live') : __('secrets.mode_test') }}{{ $check['restricted'] ? ' · '.__('secrets.mode_restricted') : '' }}
                </dd></div>
        </dl>

        <h5 class="mt-4 text-sm font-semibold text-ink">{{ __('secrets.check_webhooks') }}</h5>
        @if ($check['webhooks'] === null)
            <p class="mt-1 text-sm text-muted">{{ __('secrets.check_webhooks_unknown') }}</p>
        @elseif ($check['webhooks'] === [])
            <x-ui.alert variant="warning" class="mt-2">{{ __('secrets.check_webhooks_none') }}</x-ui.alert>
        @else
            <ul class="mt-2 space-y-3">
                @foreach ($check['webhooks'] as $hook)
                    <li class="rounded-lg border border-line bg-surface px-4 py-3">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <span class="font-mono text-xs text-body">{{ $hook['url'] }}</span>
                            <span class="text-xs {{ $hook['status'] === 'enabled' ? 'text-success' : 'text-warning' }}">{{ $hook['status'] }}</span>
                        </div>
                        <div class="mt-2 flex flex-wrap gap-1.5">
                            @foreach ($hook['events'] as $event)
                                <span class="rounded border border-line px-1.5 py-0.5 font-mono text-[11px] text-muted">{{ $event }}</span>
                            @endforeach
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    @endif
</div>