<div class="space-y-6">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('domain.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('domain.subtitle') }}</p>
    </div>

    @if ($instance === null)
        <x-ui.card><p class="text-sm text-muted">{{ __('domain.state.none') }}</p></x-ui.card>
    @else
        {{-- What is served right now. First, because it is the question
             somebody opens this page with. --}}
        <x-ui.card class="animate-rise [animation-delay:60ms]">
            <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
                <div>
                    <p class="lbl">{{ __('domain.current_address') }}</p>
                    <p class="mt-1 font-mono text-md text-ink">{{ $instance->address(\App\Support\ProvisioningSettings::dnsZone()) }}</p>
                </div>
                <div class="ml-auto">
                    {{-- Three states, not two. A domain can be proven and still
                         answer nothing, because pointing it at us is an A record
                         in the customer's own zone — and this card was printing
                         that address as if it worked. --}}
                    @if ($instance->domainIsServed())
                        <x-ui.badge status="active">{{ __('domain.state.verified') }}</x-ui.badge>
                    @elseif ($instance->domainIsVerified())
                        <x-ui.badge status="warning">{{ __('domain.state.not_served') }}</x-ui.badge>
                    @elseif (filled($instance->custom_domain))
                        <x-ui.badge status="warning">{{ __('domain.state.pending') }}</x-ui.badge>
                    @else
                        <x-ui.badge status="info">{{ __('domain.state.none') }}</x-ui.badge>
                    @endif
                </div>
            </div>
            @if ($platformAddress && $instance->domainIsVerified())
                <p class="mt-4 border-t border-line pt-3 text-sm text-muted">
                    {{ __('domain.platform_address') }}: <span class="font-mono text-body">{{ $platformAddress }}</span>
                </p>
            @endif
            @if ($instance->domainIsVerified() && ! $instance->domainIsServed())
                <x-ui.alert variant="warning" class="mt-4">{{ __('domain.not_served_hint') }}</x-ui.alert>
            @endif
        </x-ui.card>

        <x-ui.card :title="__('domain.field')" class="animate-rise [animation-delay:120ms]">
            <div class="flex flex-wrap items-end gap-3">
                <div class="min-w-[16rem] flex-1">
                    <label for="domain" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('domain.field') }}</label>
                    <input id="domain" type="text" wire:model="domain" placeholder="{{ __('domain.placeholder') }}"
                           class="min-h-11 w-full rounded border border-line bg-surface px-3 font-mono text-sm text-ink">
                    @error('domain') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
                </div>
                <x-ui.button wire:click="save">{{ __('domain.save') }}</x-ui.button>
            </div>
        </x-ui.card>

        @if (filled($instance->custom_domain))
            <x-ui.card class="animate-rise [animation-delay:180ms]">
                <p class="lbl">{{ __('domain.step_a') }}</p>
                <p class="mt-2 text-sm leading-relaxed text-muted">{{ __('domain.step_a_body') }}</p>

                <p class="lbl mt-8">{{ __('domain.step_b') }}</p>
                <p class="mt-2 text-sm leading-relaxed text-muted">{{ __('domain.step_b_body') }}</p>

                <dl class="mt-5 overflow-hidden rounded-lg border border-line">
                    @foreach ([
                        __('domain.record_name') => $recordName,
                        __('domain.record_type') => 'TXT',
                        __('domain.record_value') => $recordValue,
                    ] as $term => $value)
                        <div class="flex flex-wrap items-baseline gap-x-4 border-b border-line px-4 py-3 last:border-0">
                            <dt class="w-16 shrink-0 text-xs font-semibold text-muted">{{ $term }}</dt>
                            <dd class="min-w-0 flex-1 break-all font-mono text-sm text-ink">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>

                <div class="mt-5 flex flex-wrap items-center gap-3">
                    <x-ui.button wire:click="checkNow" variant="secondary" wire:loading.attr="disabled" wire:target="checkNow">
                        <x-ui.icon name="refresh" class="size-4" />{{ __('domain.check_now') }}
                    </x-ui.button>
                    <p class="text-xs text-muted">
                        @if ($instance->domain_checked_at)
                            {{ __('domain.checked_at', ['when' => $instance->domain_checked_at->local()->isoFormat('DD.MM. HH:mm')]) }}
                            @if (! $instance->domainIsVerified() && $instance->domain_failures > 0)
                                · <span class="text-warning">{{ __('domain.failures', ['count' => $instance->domain_failures]) }}</span>
                            @endif
                        @else
                            {{ __('domain.never_checked') }}
                        @endif
                    </p>
                </div>

                {{-- Said plainly and where it cannot be missed. A customer who
                     tidies the record away six months from now takes their own
                     cloud off its address, and "you were told at the time" is
                     no use to either side. --}}
                <x-ui.alert variant="warning" class="mt-5">{{ __('domain.keep_record') }}</x-ui.alert>
            </x-ui.card>
        @endif
    @endif
</div>
