@extends('site.layout')

@section('title', ($emoji['name'] ?? 'Emoji').' - Dewemoji')

@section('content')
    <article class="card" style="padding: 20px;">
        <p style="margin-top:0;"><a href="{{ route('home') }}" style="color: var(--brand); text-decoration:none;">&larr; Back to emoji list</a></p>

        <div style="display:grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start;">
            <div style="font-size: 82px; line-height: 1;">{{ $emoji['emoji'] ?? '' }}</div>
            <div>
                <h1 style="margin:0 0 8px 0;">{{ $emoji['name'] ?? '' }}</h1>
                <p style="margin:0;color:var(--muted);">{{ $emoji['category'] ?? '' }} / {{ $emoji['subcategory'] ?? '' }}</p>
                <p style="margin:12px 0 0 0; color:var(--muted);">{{ $emoji['description'] ?? '' }}</p>
            </div>
        </div>

        <hr style="border:none;border-top:1px solid var(--border);margin:18px 0;">

        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
            <code>Slug: {{ $emoji['slug'] ?? '' }}</code>
            @if(!empty($emoji['unified']))
                <code>Unified: {{ $emoji['unified'] }}</code>
            @endif
            <button id="copy-btn" style="border:1px solid var(--border);background:white;border-radius:10px;padding:8px 12px;cursor:pointer;">
                Copy Emoji
            </button>
        </div>

        @if(!empty($emoji['keywords_en']) && is_array($emoji['keywords_en']))
            <h3 style="margin-top: 20px;">Keywords (EN)</h3>
            <div style="display:flex;flex-wrap:wrap;gap:6px;">
                @foreach($emoji['keywords_en'] as $kw)
                    <code>{{ $kw }}</code>
                @endforeach
            </div>
        @endif
    </article>
@endsection

@push('scripts')
<script>
document.getElementById('copy-btn')?.addEventListener('click', async () => {
    const emoji = @json($emoji['emoji'] ?? '');
    await navigator.clipboard.writeText(emoji);
    const btn = document.getElementById('copy-btn');
    const old = btn.textContent;
    btn.textContent = 'Copied!';
    setTimeout(() => btn.textContent = old, 1200);
});
</script>
@endpush