@php
    $field = 'h-9 w-full rounded-md border border-line bg-inset px-3 text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
    $label = 'mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
    $statusPill = ['ok' => 'online', 'warning' => 'warning', 'critical' => 'offline', 'expired' => 'offline', 'error' => 'offline', 'unknown' => 'pending'];
@endphp

<div class="space-y-5" @if (! $ready) wire:init="scan" @endif>
    {{-- Header --}}
    <div>
        <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">{{ __('certs.eyebrow') }}</p>
        <h2 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('certs.title') }}</h2>
        <p class="mt-1 text-sm text-ink-3">{{ __('certs.subtitle') }}</p>
    </div>

    {{-- Add endpoint --}}
    <x-panel :title="__('certs.new_endpoint')">
        <form wire:submit="addEndpoint" class="grid gap-3 sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)_6rem_auto] sm:items-end">
            <div>
                <label class="{{ $label }}">{{ __('certs.label_label') }}</label>
                <input wire:model="label" type="text" maxlength="60" class="{{ $field }}" />
            </div>
            <div>
                <label class="{{ $label }}">{{ __('certs.host_label') }}</label>
                <input wire:model="host" type="text" maxlength="253" placeholder="example.com" class="{{ $field }} font-mono" />
                @error('host') <p class="mt-1 font-mono text-[11px] text-offline">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="{{ $label }}">{{ __('certs.port_label') }}</label>
                <input wire:model="port" type="number" min="1" max="65535" class="{{ $field }} font-mono" />
                @error('port') <p class="mt-1 font-mono text-[11px] text-offline">{{ $message }}</p> @enderror
            </div>
            <x-btn variant="primary" size="field" type="submit">{{ __('certs.add') }}</x-btn>
        </form>
    </x-panel>

    {{-- Endpoints --}}
    @if ($endpoints->isEmpty())
        <x-panel>
            <div class="flex flex-col items-center gap-2 py-8 text-center">
                <span class="grid h-10 w-10 place-items-center rounded-md bg-raised text-ink-4">
                    <x-icon name="lock" class="h-5 w-5" />
                </span>
                <p class="font-display text-sm font-semibold text-ink">{{ __('certs.no_endpoints_title') }}</p>
                <p class="max-w-sm text-xs text-ink-3">{{ __('certs.no_endpoints') }}</p>
            </div>
        </x-panel>
    @else
        <x-panel :padded="false">
            <div class="divide-y divide-line">
                @foreach ($endpoints as $ep)
                    @php($c = $checks[$ep->uuid] ?? null)
                    <div wire:key="ce-{{ $ep->uuid }}" class="flex flex-wrap items-center gap-3 px-4 py-3 sm:px-5">
                        <x-status-dot :status="$c ? ($statusPill[$c['status']] ?? 'pending') : 'pending'" class="h-2.5 w-2.5" />
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm text-ink">{{ $ep->label ?: $ep->host }}</p>
                            <p class="truncate font-mono text-[11px] text-ink-3">
                                {{ $ep->host }}:{{ $ep->port }}
                                @if ($c && ($c['ok'] ?? false) && ! is_null($c['daysLeft'] ?? null))
                                    ·
                                    @if ($c['daysLeft'] < 0)
                                        {{ __('certs.expired_since', ['days' => abs($c['daysLeft'])]) }}
                                    @elseif ($c['daysLeft'] === 0)
                                        {{ __('certs.expires_today') }}
                                    @else
                                        {{ __('certs.expires_in', ['days' => $c['daysLeft']]) }}
                                    @endif
                                @elseif ($c && ! ($c['ok'] ?? false))
                                    · {{ __('certs.check_error') }}
                                @endif
                            </p>
                        </div>
                        @if ($c)
                            <x-status-pill :status="$statusPill[$c['status']] ?? 'pending'">{{ __('certs.status_'.$c['status']) }}</x-status-pill>
                        @endif
                        <x-modal-trigger variant="danger-soft" action="confirmDeleteEndpoint('{{ $ep->uuid }}')">{{ __('certs.delete') }}</x-modal-trigger>
                    </div>
                @endforeach
            </div>
        </x-panel>
    @endif
</div>