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

@section('extra-styles')
    <style type="text/tailwindcss">
        body { font-family: 'Inter', sans-serif; }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
            font-size: 18px;
            vertical-align: middle;
        }
    </style>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto">
        <div class="w-full mx-auto p-6 md:p-12">
            <div class="mb-8">
                <a class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-primary dark:text-slate-400 dark:hover:text-blue-400 transition-colors"
                    href="{{ route('realEstate.agents') }}">
                    <span class="material-symbols-outlined mr-1">arrow_back</span>
                    Volver al listado
                </a>
            </div>
            <div class="mb-10">
                <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Editar Vendedor</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-2">Actualiza sus datos, fotografía y metas mensuales.</p>
            </div>
            <livewire:real-estate.agents.create-agent-form :agent-id="$agentId" />
        </div>
    </div>
@endsection