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

    <div class="space-y-3">
        @forelse($changelogs as $changelog)
        <article class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-4">
            <header class="flex items-center justify-between mb-3">
                <div>
                    <span class="font-mono font-bold text-[var(--color-accent-blue-bright)]">v{{ $changelog->version }}</span>
                    <span class="text-[var(--color-text-muted)] text-xs ml-2">{{ $changelog->project->name }}</span>
                </div>
                <span class="text-xs text-[var(--color-text-muted)]">{{ $changelog->published_at?->diffForHumans() }}</span>
            </header>
            <h2 class="font-semibold mb-2">{{ $changelog->title }}</h2>
            @if($changelog->relationLoaded('entries'))
            <ul class="text-sm space-y-1">
                @foreach($changelog->entries as $entry)
                <li class="flex gap-2">
                    <span class="text-[var(--color-text-muted)] font-mono">{{ match($entry->category) { 'added' => '+', 'changed' => '!', 'fixed' => '*', 'removed' => '-', 'deprecated' => '!', default => '·' } }}</span>
                    <span class="flex-1">{{ $entry->description }}</span>
                </li>
                @endforeach
            </ul>
            @endif
            <a href="{{ route('changelog.show', $changelog) }}" class="text-xs text-[var(--color-accent-blue-bright)] hover:underline mt-2 inline-block">Ver completo →</a>
        </article>
        @empty
        <p class="text-sm text-[var(--color-text-muted)]">Nenhum changelog publicado.</p>
        @endforelse
    </div>

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