{{--
    One definition. Shared by the topic view, the A-Z view and the focused term,
    so all three always look and behave the same.

    $entry, the normalised entry from KnowledgeBaseService.
    $tone / $tones / $hl come from the parent view (index.blade.php).
--}}
@php
    $entryTone = $tone[$tones[$entry['section']] ?? 'slate'] ?? $tone['slate'];
@endphp

<div class="flex h-full flex-col">
    <div class="flex items-start gap-3">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ring-1 {{ $entryTone['chip'] }}">
            <x-icon :name="$entry['icon']" class="h-[18px] w-[18px]" />
        </span>

        <div class="min-w-0 flex-1">
            <h3 class="text-[15px] font-bold leading-snug tracking-tight text-slate-900">{!! $hl($entry['term']) !!}</h3>

            @if ($entry['also'])
                <p class="mt-1 flex flex-wrap items-center gap-1">
                    <span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('also called') }}</span>
                    @foreach ($entry['also'] as $alias)
                        <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-600">{!! $hl($alias) !!}</span>
                    @endforeach
                </p>
            @endif
        </div>

        {{-- Copy a link straight to this definition, for pasting into a chat. --}}
        <button type="button"
            x-on:click="copy('{{ $entry['slug'] }}')"
            class="-mr-1 -mt-1 shrink-0 rounded-lg p-1.5 text-slate-300 transition hover:bg-slate-100 hover:text-slate-600"
            title="{{ __('Copy link to this term') }}"
            aria-label="{{ __('Copy link to this term') }}">
            <span x-show="copied !== '{{ $entry['slug'] }}'">
                <x-icon name="link" class="h-3.5 w-3.5" />
            </span>
            <span x-show="copied === '{{ $entry['slug'] }}'" x-cloak class="text-emerald-600">
                <x-icon name="check" class="h-3.5 w-3.5" />
            </span>
        </button>
    </div>

    <p class="mt-3 text-sm leading-relaxed text-slate-600">{!! $hl($entry['definition']) !!}</p>

    @if ($entry['points'])
        <ul class="mt-3 space-y-1.5 rounded-xl bg-slate-50/70 p-3">
            @foreach ($entry['points'] as $point)
                <li class="flex gap-2 text-[13px] leading-relaxed text-slate-500">
                    <x-icon name="check" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500" />
                    <span>{!! $hl($point) !!}</span>
                </li>
            @endforeach
        </ul>
    @endif

    @if ($entry['related_terms'])
        <div class="mt-3 flex flex-wrap items-center gap-1.5">
            <span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('see also') }}</span>
            @foreach ($entry['related_terms'] as $related)
                <button type="button" wire:click="jumpTo('{{ $related['slug'] }}')"
                    class="group inline-flex items-center gap-1 rounded-full border border-slate-200 py-0.5 pl-2 pr-1.5 text-[11px] font-medium text-slate-600 transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700">
                    {{ $related['term'] }}
                    <x-icon name="arrow-right" class="h-2.5 w-2.5 text-slate-300 transition group-hover:text-brand-500" />
                </button>
            @endforeach
        </div>
    @endif

    {{-- Where it lives. Pushed to the bottom so cards in a row line up. --}}
    @if ($entry['where'] || $entry['url'])
        <div class="mt-auto flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-3">
            @if ($entry['where'])
                <span class="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-slate-400">
                    <x-icon name="map-pin" class="h-3.5 w-3.5 shrink-0" />
                    <span class="truncate">{{ $entry['where'] }}</span>
                </span>
            @else
                <span></span>
            @endif

            @if ($entry['url'])
                <a href="{{ $entry['url'] }}" wire:navigate
                   class="group inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-lg bg-slate-50 px-2.5 py-1 text-xs font-semibold text-indigo-600 ring-1 ring-slate-200 transition hover:bg-brand-50 hover:text-indigo-800 hover:ring-brand-200">
                    {{ __('Open') }}
                    <x-icon name="arrow-right" class="h-3 w-3 transition group-hover:translate-x-0.5" />
                </a>
            @endif
        </div>
    @endif
</div>