@extends('layouts.app')
@section('title', "v{$changelog->version} · Cavendral Beta")
@section('content')
<div class="space-y-6 max-w-4xl">
    <a href="{{ route('changelog.index') }}" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-accent-blue-bright)]">← Voltar</a>

    <header>
        <div class="flex items-center gap-2 mb-2">
            <span class="font-mono font-bold text-[var(--color-accent-blue-bright)] text-lg">v{{ $changelog->version }}</span>
            <span class="text-xs text-[var(--color-text-muted)]">{{ $changelog->project->name }}</span>
        </div>
        <h1 class="text-2xl font-bold">{{ $changelog->title }}</h1>
        <div class="text-xs text-[var(--color-text-muted)] mt-1">
            Publicado por {{ $changelog->publisher?->full_name ?? '—' }} · {{ $changelog->published_at?->format('d/m/Y H:i') }}
        </div>
    </header>

    <ul class="space-y-2">
        @foreach($changelog->entries->sortBy('sort_order') as $entry)
        <li class="flex gap-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border-muted)] rounded p-3">
            <span class="font-mono font-bold
                {{ match($entry->category) {
                    'added' => 'text-[var(--color-success)]',
                    'fixed' => 'text-[var(--color-accent-blue-bright)]',
                    'changed' => 'text-[var(--color-warning)]',
                    'removed' => 'text-[var(--color-danger)]',
                    'deprecated' => 'text-[var(--color-warning)]',
                    default => 'text-[var(--color-text-muted)]',
                } }}">
                {{ match($entry->category) { 'added' => '+', 'fixed' => '*', 'changed' => '!', 'removed' => '-', 'deprecated' => '!', default => '·' } }}
            </span>
            <div>
                <div class="text-xs uppercase tracking-wider text-[var(--color-text-muted)]">{{ $entry->category }}</div>
                <div class="text-sm">{{ $entry->description }}</div>
            </div>
        </li>
        @endforeach
    </ul>
</div>
@endsection