@extends('layouts.app')
@section('title','My Projects')
@section('content')
<main class="mx-auto max-w-7xl px-5 py-8 lg:px-8">
    <div class="flex items-center justify-between gap-4"><div><div class="text-xs font-bold uppercase tracking-[.18em] text-sky-400">Design Library</div><h1 class="mt-2 text-3xl font-black">My Projects</h1></div><a href="{{ route('projects.create') }}" class="btn-primary">+ New Project</a></div>
    <div class="mt-7 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    @forelse($projects as $project)
        <div class="card p-5"><div class="grid h-32 place-items-center rounded-xl bg-slate-950 text-5xl">✈</div><div class="mt-4"><div class="text-lg font-black">{{ $project->name }}</div><div class="mt-1 text-xs text-slate-500">{{ $project->aircraftProfile->name }} @if($project->registration) · {{ $project->registration }} @endif</div></div><div class="mt-5 flex gap-2"><a class="btn-primary flex-1" href="{{ route('projects.editor',$project) }}">Open Studio</a><a class="btn-muted" href="{{ route('projects.edit',$project) }}">Edit</a></div></div>
    @empty
        <div class="card col-span-full p-10 text-center text-slate-400">No projects yet.</div>
    @endforelse
    </div>
    <div class="mt-6">{{ $projects->links() }}</div>
</main>
@endsection