@php
$colors = $colors ?? [];
@endphp

<div class="mb-3 break-inside-avoid rounded-xl border border-border/60 p-3 shadow-sm hover:shadow-md transition-shadow group" style="background-color: {{ $note->color }}; color: #f8fafc">
    @if ($note->title)
        <div class="font-semibold text-sm mb-1 break-words">{{ $note->title }}</div>
    @endif
    @if ($note->content)
        <div class="text-sm whitespace-pre-wrap break-words opacity-90">{{ $note->content }}</div>
    @endif
    <div class="flex items-center justify-end gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
        <form method="POST" action="{{ route('notes.update', $note) }}">
            @csrf @method('PUT')
            <input type="hidden" name="pinned" value="{{ $note->pinned ? '0' : '1' }}">
            <button type="submit" class="p-1.5 rounded-md hover:bg-white/10 text-xs font-medium" title="{{ $note->pinned ? 'Unpin' : 'Pin' }}">
                {{ $note->pinned ? 'Unpin' : 'Pin' }}
            </button>
        </form>
        <form method="POST" action="{{ route('notes.destroy', $note) }}" onsubmit="return confirm('Delete korben?')">
            @csrf @method('DELETE')
            <button type="submit" class="p-1.5 rounded-md hover:bg-white/10 text-xs font-medium" title="Delete">Delete</button>
        </form>
    </div>
</div>