@props(['project'])

@php
    $index = str_pad($project->sort_order, 2, '0', STR_PAD_LEFT);
    $frameTitle = "[{$index}] {$project->slug}";
    $coverThumb = $project->getFirstMediaUrl('cover', 'thumb');
    $tags = $project->tech_stack ?? [];

    $links = [
        ['label' => 'view details', 'url' => '/projects/' . $project->slug, 'external' => false],
    ];
    if ($project->repo_url) {
        $links[] = ['label' => 'repo', 'url' => $project->repo_url, 'external' => true];
    }
@endphp

<x-ascii-frame :title="$frameTitle">
    @if(count($tags))
        <p class="text-string text-sm mb-2"># tags: {{ implode(', ', $tags) }}</p>
    @endif

    <p class="text-fg text-sm mb-3 leading-relaxed">{{ $project->summary }}</p>

    <div class="mt-3 space-y-0.5 text-sm -ml-[10px]">
        @foreach($links as $link)
            <div class="flex items-center gap-1 whitespace-nowrap overflow-hidden">
                <span class="text-border shrink-0">{{ $loop->last ? '└─' : '├─' }}</span>
                <span class="text-border shrink-0">[</span>
                <a href="{{ $link['url'] }}"
                   class="text-fn hover:text-error shrink-0"
                   @if($link['external']) target="_blank" rel="noopener" @endif>{{ $link['label'] }}</a>
                <span class="text-border shrink-0">]</span>
                <span class="text-border shrink-0">──></span>
                <span class="text-fn truncate">{{ $link['url'] }}</span>
            </div>
        @endforeach
    </div>
</x-ascii-frame>