@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.index') }}" 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">New report</h1>
                <span class="rounded border border-zinc-300 bg-zinc-50 px-2 py-1 text-xs font-bold text-zinc-700">Draft</span>
            </div>
            <p class="mt-1 text-sm text-zinc-600">Capture field progress, safety checks, resources, and media.</p>
        </div>
        <a href="{{ route('reports.index') }}" 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.store') }}" enctype="multipart/form-data" data-upload-form data-offline-draft-form data-offline-draft-key="report-create" data-offline-sync-form data-offline-sync-label="New report">
        @include('reports.form')
    </form>
@endsection