@extends('layouts.admin')
@section('title', 'Block library')
@section('admin')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-white">Block Library</h1>
        <p class="text-sm text-gray-400">Reusable sections you can drop into any email template or campaign. Capture them from the editor with "＋ Save as Block", or build raw MJML below.</p>
    </div>
    <a href="{{ route('admin.blocks.create') }}" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">
        <i class="fa-solid fa-plus mr-1"></i>New block
    </a>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    @forelse($blocks as $b)
        @php $hasDesign = ! empty($b->design_json); @endphp
        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <span class="text-xs uppercase tracking-wide text-red-400">{{ $b->category }}</span>
                    @if($hasDesign)
                        <span class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-900/40 text-emerald-300">design</span>
                    @else
                        <span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-900/40 text-amber-300">mjml</span>
                    @endif
                </div>
                <div class="flex items-center gap-2 text-gray-500">
                    <a href="{{ route('admin.blocks.edit', $b) }}" class="hover:text-white"><i class="fa-solid fa-pen-to-square"></i></a>
                    <form method="POST" action="{{ route('admin.blocks.destroy', $b) }}" onsubmit="return confirm('Delete block?')" class="inline">
                        @csrf @method('DELETE')<button class="hover:text-red-400"><i class="fa-solid fa-trash"></i></button>
                    </form>
                </div>
            </div>
            <h3 class="text-white font-semibold">{{ $b->name }}</h3>
            @if($b->description)<p class="text-xs text-gray-500 mt-1">{{ $b->description }}</p>@endif
            @if($hasDesign)
                <div class="mt-3 bg-gray-950 border border-gray-800 rounded p-2 text-[10px] text-gray-500">Captured Unlayer design (insertable via the editor's Block Library drawer).</div>
            @else
                <pre class="mt-3 bg-gray-950 border border-gray-800 rounded p-2 text-[10px] text-gray-500 overflow-hidden max-h-24">{{ \Illuminate\Support\Str::limit($b->mjml, 200) }}</pre>
            @endif
        </div>
    @empty
        <div class="md:col-span-3 p-12 text-center text-gray-500 border border-dashed border-gray-800 rounded-lg">
            No reusable blocks yet. Build one in any email editor and click "＋ Save as Block", or click <a class="text-red-400" href="{{ route('admin.blocks.create') }}">New block</a> to author MJML directly.
        </div>
    @endforelse
</div>
@endsection