@extends('layouts.app')
@section('title', 'Projetos · Cavendral Beta')
@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold">Projetos</h1>
    </div>

    <form method="GET" class="flex gap-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Buscar projeto..."
               class="flex-1 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border-default)] rounded text-sm focus:border-[var(--color-accent-blue)] focus:ring-2 focus:ring-[var(--color-accent-blue-bright)]/40 outline-none">
        <button type="submit" class="px-4 py-2 bg-[var(--color-bg-tertiary)] border border-[var(--color-border-default)] rounded text-sm hover:bg-[var(--color-border-default)] transition">Buscar</button>
    </form>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse($projects as $project)
        <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-4 hover:border-[var(--color-border-default)] transition">
            <div class="flex items-start gap-3 mb-3">
                <div class="w-12 h-12 rounded bg-[var(--color-bg-tertiary)] flex items-center justify-center font-mono font-bold text-[var(--color-accent-blue-bright)]">
                    {{ strtoupper(substr($project->name, 0, 3)) }}
                </div>
                <div class="flex-1">
                    <div class="font-semibold">{{ $project->name }}</div>
                    <div class="text-xs text-[var(--color-text-muted)]">v{{ $project->current_version ?? '—' }} · {{ $project->status }}</div>
                </div>
            </div>
            <p class="text-sm text-[var(--color-text-secondary)] line-clamp-2 mb-3">{{ $project->description }}</p>
            <div class="flex gap-2 text-xs">
                <a href="{{ route('projects.show', $project->slug) }}" class="flex-1 text-center px-3 py-1.5 bg-[var(--color-accent-blue)] text-white rounded hover:bg-[var(--color-accent-blue-bright)] transition">Ver detalhe →</a>
                <a href="{{ route('changelog.index') }}?project_id={{ $project->id }}" class="px-3 py-1.5 bg-[var(--color-bg-tertiary)] border border-[var(--color-border-default)] rounded hover:bg-[var(--color-border-default)] transition">Changelog</a>
                <a href="{{ route('feedback.create', $project->slug) }}" class="px-3 py-1.5 border border-[var(--color-accent-blue)] text-[var(--color-accent-blue-bright)] rounded hover:bg-[var(--color-accent-blue)]/10 transition">Feedback</a>
            </div>
        </div>
        @empty
        <div class="col-span-full text-center py-8 text-[var(--color-text-muted)]">
            Nenhum projeto disponível. Se você foi convidado, aceite o convite pelo email.
        </div>
        @endforelse
    </div>

    <div>{{ $projects->withQueryString()->links() }}</div>
</div>
@endsection