@extends('layouts.app')

@section('content')
    <div class="mb-6 flex items-center justify-between border-b border-zinc-200 pb-4 md:hidden">
        <a href="{{ route('reports.show', $report) }}" class="inline-flex items-center text-emerald-900"><span class="material-symbols-outlined">arrow_back</span></a>
        <div class="text-xl font-bold text-emerald-950">Report Editor</div>
        <button type="submit" form="report-editor-form" class="text-sm font-bold text-emerald-900">Save</button>
    </div>

    <div class="mb-6 hidden flex-col gap-4 sm:flex-row sm:items-end sm:justify-between md:flex">
        <div>
            <div class="flex flex-wrap items-center gap-3">
                <h1 class="text-3xl font-bold">Edit report</h1>
                @include('partials.status-badge', ['status' => $report->status])
            </div>
            <p class="mt-1 text-sm text-zinc-600">{{ $report->reference_number }} · {{ $report->project->name }}</p>
        </div>
        <a href="{{ route('reports.show', $report) }}" class="inline-flex rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Cancel</a>
    </div>

    <form id="report-editor-form" method="POST" action="{{ route('reports.update', $report) }}" enctype="multipart/form-data" data-upload-form data-offline-draft-form data-offline-draft-key="report-edit-{{ $report->id }}" data-offline-sync-form data-offline-sync-label="Report {{ $report->reference_number }}">
        @include('reports.form')
    </form>
@endsection