@extends('layouts.dashboard.inface', ['section' => 'developments'])

@section('extra-styles')
    <style>
        .icon-filled {
            font-variation-settings: 'FILL' 1;
        }
    </style>
@endsection

@section('navbar-buttons')
    <a href="{{ route('realEstate.development.create') }}"
        class="hidden md:flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 transition-colors">
        <span class="material-symbols-outlined !text-[20px]">add</span>
        <span class="hidden sm:inline">Nuevo Fraccionamiento</span>

    </a>
@endsection

@section('content')
    <a href="{{ route('realEstate.development.create') }}"
        class="md:hidden fixed bottom-6 right-6 z-50 flex items-center justify-center size-14 rounded-full bg-primary text-white shadow-xl shadow-primary/40 active:scale-95 transition-transform">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6">
        <div class="max-w-[1400px] mx-auto flex flex-col gap-6">
            <!-- Breadcrumbs & Heading -->
            <div class="flex flex-col gap-4">
                <div class="flex items-center gap-2 text-sm text-text-secondary">
                    <a class="hover:text-primary" href="#">Home</a>
                    <span class="text-gray-400">/</span>
                    <span class="text-text-main dark:text-white font-medium">Fraccionamientos</span>
                </div>
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                    <div>
                        <h2 class="text-3xl font-bold text-text-main dark:text-white tracking-tight">
                            Fraccionamientos</h2>
                        <p class="text-text-secondary mt-1">Administra tus desarrollos residenciales y la disponibilidad de
                            tu inventario.</p>
                    </div>

                </div>
            </div>
            <livewire:real-estate.developments.developments-grid></livewire:real-estate.developments.developments-grid>
        </div>
    </div>
@endsection