@extends('layouts.app')
@section('title', $project->name.' · FBW Template Workspace')
@section('content')
<style>
  .template-shell{height:calc(100vh - 72px);min-height:680px;display:grid;grid-template-columns:250px minmax(0,1fr) 300px;background:#eef4fa;overflow:hidden}.template-panel{background:#fff;overflow:auto}.template-stage{position:relative;overflow:hidden;background:#e8f1fa}.template-stage canvas{display:block;width:100%;height:100%;touch-action:none}.template-tool{display:flex;width:100%;align-items:center;gap:.65rem;border:1px solid transparent;border-radius:.65rem;padding:.65rem .7rem;color:#405672;font-size:.8rem;font-weight:700;text-align:left}.template-tool:hover,.template-tool.active{background:#e9f2ff;border-color:#9fc8f3;color:#123f78}.template-section{padding:1.1rem .7rem .35rem;color:#7086a1;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.template-surface{display:flex;width:100%;align-items:center;gap:.55rem;border:1px solid #d7e2ee;border-radius:.65rem;padding:.6rem .7rem;background:#f8fbff;color:#2f4867;font-size:.75rem;text-align:left}.template-surface.active{border-color:#78afe4;background:#e9f2ff;color:#123f78}.template-card{border:1px solid rgba(92,132,177,.28);background:rgba(255,255,255,.86);box-shadow:0 12px 35px rgba(34,75,120,.12);backdrop-filter:blur(16px)}@media(max-width:1050px){.template-shell{grid-template-columns:210px minmax(0,1fr)}.template-inspector{display:none}}
</style>
<div data-nexus-template-editor data-save-url="{{ route('projects.editor.save',$project) }}" data-build-url="{{ route('projects.template.build',$project) }}" data-project-state='@json($project->editor_state ?? [])' data-registration='@json($project->registration)' data-airline='@json($project->airline_name)' class="template-shell">
  <aside class="template-panel border-r border-slate-200 p-3"><div class="px-2 pt-1"><div class="text-[10px] font-black uppercase tracking-[.2em] text-blue-600">VA Nexus · Template Lab</div><div class="mt-2 truncate text-base font-black text-slate-900">{{ $project->name }}</div><div class="mt-1 text-[11px] text-slate-500">FBW A32NX exact paint surfaces</div></div><div class="template-section">Surface Maps</div><div id="template-surfaces" class="space-y-1"></div><div class="template-section">Tools</div><div class="space-y-1"><button class="template-tool active" data-template-tool="brush">✎ Paint Brush</button><button class="template-tool" data-template-tool="eraser">⌫ Eraser</button><button class="template-tool" data-template-tool="text">T Text</button><label class="template-tool cursor-pointer">▣ Add Logo<input id="template-logo" type="file" accept="image/png,image/jpeg,image/webp" class="hidden"></label><button id="template-undo" class="template-tool">↶ Undo</button><button id="template-fit" class="template-tool">⌗ Fit Template</button></div></aside>
  <main class="template-stage"><canvas id="template-canvas"></canvas><div class="pointer-events-none absolute left-5 top-5 template-card rounded-xl px-4 py-3"><div class="text-[11px] font-black text-slate-900">FBW TEMPLATE WORKSPACE</div><div id="template-status" class="mt-1 text-[10px] text-blue-600">Loading exact paint surface…</div></div><div class="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-full border border-slate-300 bg-white/85 px-4 py-2 text-[10px] text-slate-600"><span id="template-help">Paint on the editable layer · wheel zooms · hold Space to pan</span></div></main>
  <aside class="template-panel template-inspector border-l border-slate-200 p-4"><div class="text-[10px] font-black uppercase tracking-[.2em] text-blue-600">Artwork Layer</div><div id="template-selected" class="mt-2 text-lg font-black text-slate-900">Fuselage</div><div class="mt-1 text-[10px] text-slate-500">Exact FBW PSD composite underneath</div><div class="my-4 h-px bg-slate-200"></div><label class="label">Brush Color</label><input id="template-color" type="color" value="#1476d4" class="h-10 w-full cursor-pointer rounded-lg border border-slate-200 bg-white p-1"><div class="mt-4"><label class="label">Brush Size <span id="template-size-label" class="float-right text-blue-600">24</span></label><input id="template-size" type="range" min="2" max="300" value="24" class="w-full"></div><div class="mt-4"><label class="label">Text</label><input id="template-text" class="input" value="NEXUS" maxlength="64"></div><div class="my-4 h-px bg-slate-200"></div><div class="rounded-lg border border-slate-200 bg-slate-50 p-3 text-[10px] leading-5 text-slate-600">Template mode is export-authoritative. The supplied FBW composite remains locked; your artwork is stored as editable operations.</div><div class="mt-4 space-y-2"><button id="template-save" class="btn-primary w-full">Save Template Project</button><button id="template-validate" class="btn-muted w-full">Validate FBW Mapping</button><button id="template-download" class="btn-muted w-full">Download Surface PNG</button></div><div id="template-save-status" class="mt-3 text-center text-[11px] text-slate-500">Ready</div></aside>
</div>
@endsection