@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;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #334155;
        }
    </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" style="font-size: 18px;">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">Agregar Nuevo
                    Vendedor</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-2">Registra un nuevo miembro del equipo de
                    ventas y asigna sus metas mensuales.</p>
            </div>
            <livewire:real-estate.agents.create-agent-form></livewire:real-estate.agents.create-agent-form>
        </div>
    </div>
@endsection