<div>
    @php $ws = current_workspace(); @endphp
    <div class="flex items-center justify-between mb-6 nim-reveal nim-reveal-1">
        <div>
            <h1 class="text-t1">Link-in-Bio</h1>
            <p class="text-xs text-t3 mt-0.5">{{ $bioPages->total() }} pages</p>
        </div>
        @if($ws)
        <button
            @click="$dispatch('openModal', {component: 'modals.create-bio-page', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
            class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity flex items-center gap-1.5">
            <x-heroicon-o-plus class="w-4 h-4" />
            New Bio Page
        </button>
        @endif
    </div>

    <div class="bg-s1 border border-white/[.06] rounded-xl overflow-hidden card-shadow nim-reveal nim-reveal-2">
        @forelse($bioPages as $page)
        @php $title = is_array($page->title) ? ($page->title['en'] ?? $page->slug) : ($page->title ?? $page->slug); @endphp
        <div class="flex items-center gap-4 px-5 py-3.5 border-b border-white/[.03] last:border-0 table-row-hover hover:bg-white/[.015] group relative">
            <div class="w-8 h-8 bg-s2 border border-white/[.06] rounded-lg flex items-center justify-center flex-shrink-0">
                <x-heroicon-o-bars-3-bottom-left class="w-4 h-4 text-t3" />
            </div>

            <div class="flex-1 min-w-0">
                <div class="text-sm font-semibold text-t1">{{ $title }}</div>
                <div class="text-xs text-t3 font-mono mt-0.5">nimu.li/<span class="text-blue">{{ $page->slug }}</span></div>
            </div>

            <span class="badge {{ $page->is_published ? 'bg-green/10 text-green' : 'bg-white/[.06] text-t3' }}">
                @if($page->is_published)
                    <span class="w-1 h-1 rounded-full bg-green inline-block"></span>
                @endif
                {{ $page->is_published ? 'Published' : 'Draft' }}
            </span>

            <div class="flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-all duration-150">
                <x-ui.copy-button :value="'https://nimu.li/b/'.$page->slug" label="Copy" />
                <button
                    @click="$dispatch('openModal', {component: 'modals.edit-bio-page', arguments: {bioUlid: '{{ $page->ulid }}'}})"
                    class="text-t2 text-xs hover:text-t1 transition-colors">Edit</button>
                <button
                    @click="$dispatch('openModal', {component: 'modals.delete-bio-page', arguments: {bioUlid: '{{ $page->ulid }}'}})"
                    class="text-t3 text-xs hover:text-red transition-colors">Delete</button>
            </div>
        </div>
        @empty
        <div class="p-16 text-center">
            <svg class="w-10 h-10 mx-auto text-t3 mb-4" fill="none" viewBox="0 0 40 40" stroke="currentColor" stroke-width="1">
                <rect x="6" y="4" width="28" height="32" rx="3"/>
                <path stroke-linecap="round" d="M12 12h16M12 18h16M12 24h10"/>
            </svg>
            <p class="text-sm text-t2 mb-1.5">No bio pages yet</p>
            <p class="text-xs text-t3 mb-6">Create a link-in-bio page for Instagram, TikTok and more.</p>
            @if($ws)
            <button
                @click="$dispatch('openModal', {component: 'modals.create-bio-page', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
                class="px-4 py-2.5 bg-accent-gradient text-white rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity">
                Create first Bio Page
            </button>
            @endif
        </div>
        @endforelse
    </div>

    @if($bioPages->hasPages())
    <div class="mt-4">{{ $bioPages->links() }}</div>
    @endif
</div>
