@props(['articles', 'variant' => 'banner', 'title' => 'Może pomogą te artykuły z bazy wiedzy', 'showCopy' => false])

@php
    $icons = ['book' => 'menu_book', 'chapter' => 'bookmark', 'bookshelf' => 'library_books', 'page' => 'article'];
    $isSidebar = $variant === 'sidebar';
@endphp

@if (count($articles))
    <div class="card" style="{{ $isSidebar ? 'padding:16px;gap:8px' : 'padding:14px;gap:10px;background:color-mix(in srgb, var(--color-accent) 6%, transparent);border-color:color-mix(in srgb, var(--color-accent) 25%, var(--color-divider))' }}">
        @if ($isSidebar)
            <div class="card-kicker">{{ $title }}</div>
        @else
            <div style="display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600">
                <span class="material-symbols-outlined" style="font-size:16px">auto_awesome</span>
                {{ $title }}
            </div>
        @endif
        <div style="display:flex;flex-direction:column;gap:2px">
            @foreach ($articles as $article)
                <div
                    @if ($showCopy) x-data="{ copied: false }" @endif
                    style="display:flex;gap:6px;align-items:flex-start;padding:8px;border-radius:6px"
                    onmouseover="this.style.background='color-mix(in srgb, var(--color-accent) 8%, transparent)'"
                    onmouseout="this.style.background='transparent'"
                >
                    <a
                        href="{{ $article['url'] }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        style="display:flex;gap:10px;align-items:flex-start;flex:1;min-width:0;text-decoration:none;color:inherit"
                    >
                        <span class="material-symbols-outlined" style="font-size:18px;flex:none;margin-top:1px;color:var(--color-accent)">{{ $icons[$article['type']] ?? 'article' }}</span>
                        <span style="min-width:0;flex:1">
                            <span style="display:block;font-size:13px;font-weight:500;color:var(--color-accent)">{{ $article['name'] }}</span>
                            @if (! empty($article['book']) && $article['book'] !== $article['name'])
                                <span style="display:block;font-size:11px;color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-top:1px">
                                    {{ ! empty($article['shelf']) ? $article['shelf'].' > '.$article['book'] : $article['book'] }}
                                </span>
                            @endif
                        </span>
                    </a>
                    @if ($showCopy)
                        <button
                            type="button"
                            class="btn btn-secondary"
                            style="flex:none;font-size:11px;padding:4px 8px;white-space:nowrap"
                            x-on:click="navigator.clipboard.writeText(@js($article['url'])); copied = true; setTimeout(() => copied = false, 1500)"
                            x-text="copied ? 'Skopiowano!' : 'Kopiuj link'"
                        ></button>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endif