@extends('layouts.app')

@section('mobile-title', 'New Project')
@section('mobile-subtitle', 'Project setup')
@section('mobile-back', route('projects.index'))

@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold">New project</h1>
            <p class="mt-1 text-sm text-zinc-600">Create a monitored site and assign the delivery team.</p>
        </div>
        <a href="{{ route('projects.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 method="POST" action="{{ route('projects.store') }}" class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
        @include('projects.form')
    </form>
@endsection