@extends('layouts.jira')

@section('content')
<div class="py-6 px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Project Drawings</h1>
            <p class="text-slate-500 text-sm mt-1">Manage and present your ideas visually for {{ $project->name }}</p>
        </div>
        <a href="{{ route('projects.drawings.create', $project) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg shadow-sm transition">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
            New Drawing
        </a>
    </div>

    @if($drawings->isEmpty())
        <div class="bg-white dark:bg-slate-800 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-700 p-12 text-center">
            <div class="bg-blue-50 dark:bg-blue-900/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
            </div>
            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">No drawings yet</h3>
            <p class="text-slate-500 mb-6 max-w-sm mx-auto">Create visual presentations, sketches, or flowcharts directly in your project.</p>
            <a href="{{ route('projects.drawings.create', $project) }}" class="text-blue-600 font-semibold hover:text-blue-700 underline">Start your first drawing</a>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($drawings as $drawing)
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden hover:shadow-md transition">
                    <div class="aspect-video bg-slate-100 dark:bg-slate-900 flex items-center justify-center relative group">
                        <svg class="w-12 h-12 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-center">
                            <a href="{{ route('projects.drawings.edit', [$project, $drawing]) }}" class="opacity-0 group-hover:opacity-100 px-4 py-2 bg-white text-slate-900 rounded-lg shadow-sm text-sm font-bold transition">Open Editor</a>
                        </div>
                    </div>
                    <div class="p-4 flex items-center justify-between">
                        <div>
                            <h3 class="font-bold text-slate-900 dark:text-white truncate max-w-[180px]">{{ $drawing->title }}</h3>
                            <p class="text-xs text-slate-500 mt-1">Edited {{ $drawing->updated_at->diffForHumans() }}</p>
                        </div>
                        <div class="flex items-center -space-x-2">
                             <img src="{{ $drawing->author->avatarUrl() }}" alt="{{ $drawing->author->name }}" class="w-8 h-8 rounded-full border-2 border-white dark:border-slate-800" title="{{ $drawing->author->name }}">
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection