@extends('layouts.app')

@section('title', 'Add Property')

@section('content')
    <header class="flex items-center w-full px-12 py-6 bg-background/80 backdrop-blur-md sticky top-0 z-50">
        <a href="{{ route('properties.index') }}" class="flex items-center gap-2 text-secondary hover:text-primary transition-colors">
            <span class="material-symbols-outlined">arrow_back</span>
            <span class="font-body text-label-md">Back to Properties</span>
        </a>
    </header>

    <section class="flex-1 overflow-auto px-12 pb-12 flex items-start justify-center">
        <div class="w-full max-w-lg bg-surface-cream border border-outline-variant/20 rounded-xl shadow-sm p-10 mt-6">
            <header class="mb-10 text-center">
                <h2 class="font-headline text-headline-sm text-primary mb-2">Add Property</h2>
                <p class="font-body text-label-md text-secondary opacity-80">
                    Add a villa or apartment before connecting its Airbnb, Traveloka, or Booking.com calendar.
                </p>
            </header>

            <form method="POST" action="{{ route('properties.store') }}" class="space-y-8">
                @include('properties._form')

                <div class="pt-6 flex flex-col items-center gap-4">
                    <button type="submit"
                            class="w-full bg-accent-terracotta text-on-primary py-4 px-8 rounded-lg font-body text-label-md shadow-lg shadow-accent-terracotta/20 hover:opacity-90 transition-all active:scale-[0.98]">
                        Add Property
                    </button>
                    <a href="{{ route('properties.index') }}" class="text-secondary hover:text-primary font-body text-label-md transition-colors py-2">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </section>
@endsection