<div class="details-wrapper" ...attributes>
    {{! CORE DETAILS }}
    <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
            {{! Vehicle Identification }}
            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
                Vehicle Identification
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "common.name"}}</div>
                <div class="field-value">{{n-a @resource.name}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "common.internal-id"}}</div>
                <div class="field-value">{{n-a @resource.internal_id}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "vehicle.fields.plate-number"}}</div>
                <div class="field-value">{{n-a @resource.plate_number}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "vehicle.fields.vin-number"}}</div>
                <div class="field-value">{{n-a @resource.vin}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "vehicle.fields.make"}}</div>
                <div class="field-value">{{n-a @resource.make}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "vehicle.fields.model"}}</div>
                <div class="field-value">{{n-a @resource.model}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "vehicle.fields.year"}}</div>
                <div class="field-value">{{n-a @resource.year}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Trim</div>
                <div class="field-value">{{n-a @resource.trim}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Color</div>
                <div class="field-value">{{n-a @resource.color}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Serial Number</div>
                <div class="field-value">{{n-a @resource.serial_number}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Fuel Card Number</div>
                <div class="field-value">{{n-a @resource.fuel_card_number}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Class</div>
                <div class="field-value">{{n-a @resource.class}}</div>
            </div>

            {{! Assignment & Status }}
            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Assignment & Status
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "vehicle.fields.driver-assigned"}}</div>
                <div class="field-value">
                    {{n-a (or @resource.driver.name @resource.driver_name)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "common.status"}}</div>
                <div class="field-value">{{n-a (smart-humanize @resource.status)}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Call Sign</div>
                <div class="field-value">{{n-a @resource.call_sign}}</div>
            </div>

            {{! Location }}
            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Location
            </div>

            <div class="field-info-container col-span-2">
                <div class="field-name">
                    {{t "common.coordinates"}}
                </div>
                <div class="field-value">
                    {{point-coordinates @resource.location}}
                </div>
            </div>
        </div>
    </ContentPanel>

    {{! MEASUREMENT, UNITS & ODOMETER }}
    <ContentPanel @title="Measurement & Units" @open={{false}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
                Measurement & Units
            </div>

            <div class="field-info-container">
                <div class="field-name">System of Measurement</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "measurementSystems" @resource.measurement_system)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Fuel Volume Unit</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "fuelVolumeUnits" @resource.fuel_volume_unit)}}
                </div>
            </div>

            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Odometer & Usage
            </div>

            <div class="field-info-container">
                <div class="field-name">
                    {{concat "Current Odometer (" @resource.odometer_unit ")"}}
                </div>
                <div class="field-value">
                    {{n-a @resource.odometer}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Odometer Unit</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "odometerUnits" @resource.odometer_unit)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Odometer at Purchase</div>
                <div class="field-value">{{n-a @resource.odometer_at_purchase}}</div>
            </div>
        </div>
    </ContentPanel>

    {{! BODY & USAGE }}
    <ContentPanel @title="Body & Usage" @open={{false}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
                Body & Usage
            </div>

            <div class="field-info-container">
                <div class="field-name">Body Type</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "vehicleBodyTypes" @resource.body_type)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Body Subtype</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "vehicleBodySubTypes" @resource.body_sub_type)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Usage Type</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "vehicleUsageTypes" @resource.usage_type)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Ownership Type</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "vehicleOwnershipTypes" @resource.ownership_type)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Fuel Type</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "fuelTypes" @resource.fuel_type)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Transmission</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "transmissionTypes" @resource.transmission)}}
                </div>
            </div>
        </div>
    </ContentPanel>

    {{! TECHNICAL SPECIFICATIONS }}
    <ContentPanel @title="Technical Specifications" @open={{false}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">

            {{! Powertrain & Engine }}
            <div class="col-span-3 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
                Powertrain & Engine
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Number</div>
                <div class="field-value">{{n-a @resource.engine_number}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Make</div>
                <div class="field-value">{{n-a @resource.engine_make}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Model</div>
                <div class="field-value">{{n-a @resource.engine_model}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Family</div>
                <div class="field-value">{{n-a @resource.engine_family}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Configuration</div>
                <div class="field-value">{{n-a @resource.engine_configuration}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Cylinder Arrangement</div>
                <div class="field-value">{{n-a @resource.cylinder_arrangement}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Number of Cylinders</div>
                <div class="field-value">{{n-a @resource.number_of_cylinders}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Size</div>
                <div class="field-value">
                    {{#if @resource.engine_size}}
                        {{@resource.engine_size}}
                        L
                    {{else}}
                        {{n-a @resource.engine_size}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Engine Displacement</div>
                <div class="field-value">
                    {{#if @resource.engine_displacement}}
                        {{@resource.engine_displacement}}
                        cc
                    {{else}}
                        {{n-a @resource.engine_displacement}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Horsepower</div>
                <div class="field-value">
                    {{#if @resource.horsepower}}
                        {{@resource.horsepower}}
                        hp
                    {{else}}
                        {{n-a @resource.horsepower}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Horsepower RPM</div>
                <div class="field-value">{{n-a @resource.horsepower_rpm}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Torque</div>
                <div class="field-value">
                    {{#if @resource.torque}}
                        {{@resource.torque}}
                        Nm
                    {{else}}
                        {{n-a @resource.torque}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Torque RPM</div>
                <div class="field-value">{{n-a @resource.torque_rpm}}</div>
            </div>

            {{! Capacity & Dimensions }}
            <div class="col-span-3 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Capacity & Dimensions
            </div>

            <div class="field-info-container">
                <div class="field-name">Fuel Capacity</div>
                <div class="field-value">
                    {{#if @resource.fuel_capacity}}
                        {{@resource.fuel_capacity}}
                        L
                    {{else}}
                        {{n-a @resource.fuel_capacity}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Payload Capacity</div>
                <div class="field-value">
                    {{#if @resource.payload_capacity}}
                        {{@resource.payload_capacity}}
                        kg
                    {{else}}
                        {{n-a @resource.payload_capacity}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Towing Capacity</div>
                <div class="field-value">
                    {{#if @resource.towing_capacity}}
                        {{@resource.towing_capacity}}
                        kg
                    {{else}}
                        {{n-a @resource.towing_capacity}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Seating Capacity</div>
                <div class="field-value">{{n-a @resource.seating_capacity}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Vehicle Weight</div>
                <div class="field-value">
                    {{#if @resource.weight}}
                        {{@resource.weight}}
                        kg
                    {{else}}
                        {{n-a @resource.weight}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Length</div>
                <div class="field-value">
                    {{#if @resource.length}}
                        {{@resource.length}}
                        cm
                    {{else}}
                        {{n-a @resource.length}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Width</div>
                <div class="field-value">
                    {{#if @resource.width}}
                        {{@resource.width}}
                        cm
                    {{else}}
                        {{n-a @resource.width}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Height</div>
                <div class="field-value">
                    {{#if @resource.height}}
                        {{@resource.height}}
                        cm
                    {{else}}
                        {{n-a @resource.height}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Cargo Volume</div>
                <div class="field-value">
                    {{#if @resource.cargo_volume}}
                        {{@resource.cargo_volume}}
                        L
                    {{else}}
                        {{n-a @resource.cargo_volume}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Payload Volume</div>
                <div class="field-value">
                    {{#if @resource.payload_capacity_volume}}
                        {{@resource.payload_capacity_volume}}
                        m³
                    {{else}}
                        {{n-a @resource.payload_capacity_volume}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Pallet Capacity</div>
                <div class="field-value">{{n-a @resource.payload_capacity_pallets}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Parcel Capacity</div>
                <div class="field-value">{{n-a @resource.payload_capacity_parcels}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Passenger Volume</div>
                <div class="field-value">
                    {{#if @resource.passenger_volume}}
                        {{@resource.passenger_volume}}
                        L
                    {{else}}
                        {{n-a @resource.passenger_volume}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Interior Volume</div>
                <div class="field-value">
                    {{#if @resource.interior_volume}}
                        {{@resource.interior_volume}}
                        L
                    {{else}}
                        {{n-a @resource.interior_volume}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Ground Clearance</div>
                <div class="field-value">
                    {{#if @resource.ground_clearance}}
                        {{@resource.ground_clearance}}
                        cm
                    {{else}}
                        {{n-a @resource.ground_clearance}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Bed Length</div>
                <div class="field-value">
                    {{#if @resource.bed_length}}
                        {{@resource.bed_length}}
                        cm
                    {{else}}
                        {{n-a @resource.bed_length}}
                    {{/if}}
                </div>
            </div>

            {{! Regulatory & Compliance }}
            <div class="col-span-3 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Regulatory & Compliance
            </div>

            <div class="field-info-container">
                <div class="field-name">Emission Standard</div>
                <div class="field-value">{{n-a @resource.emission_standard}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">DPF Equipped</div>
                <div class="field-value">
                    {{#if (eq @resource.dpf_equipped true)}}
                        {{t "common.yes"}}
                    {{else if (eq @resource.dpf_equipped false)}}
                        {{t "common.no"}}
                    {{else}}
                        -
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">SCR Equipped</div>
                <div class="field-value">
                    {{#if (eq @resource.scr_equipped true)}}
                        {{t "common.yes"}}
                    {{else if (eq @resource.scr_equipped false)}}
                        {{t "common.no"}}
                    {{else}}
                        -
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">GVWR</div>
                <div class="field-value">
                    {{#if @resource.gvwr}}
                        {{@resource.gvwr}}
                        kg
                    {{else}}
                        {{n-a @resource.gvwr}}
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">GCWR</div>
                <div class="field-value">
                    {{#if @resource.gcwr}}
                        {{@resource.gcwr}}
                        kg
                    {{else}}
                        {{n-a @resource.gcwr}}
                    {{/if}}
                </div>
            </div>
        </div>
    </ContentPanel>

    {{! FINANCIAL & LIFECYCLE }}
    <ContentPanel @title="Financial & Lifecycle" @open={{false}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
                Asset Values
            </div>

            <div class="field-info-container">
                <div class="field-name">Acquisition Cost</div>
                <div class="field-value">
                    {{format-currency @resource.acquisition_cost @resource.currency}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Current Value</div>
                <div class="field-value">
                    {{format-currency @resource.current_value @resource.currency}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Insurance Value</div>
                <div class="field-value">
                    {{format-currency @resource.insurance_value @resource.currency}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Depreciation Rate (%)</div>
                <div class="field-value">{{n-a @resource.depreciation_rate}}</div>
            </div>

            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Lifecycle & Service Life
            </div>

            <div class="field-info-container">
                <div class="field-name">Estimated Service Life (Distance)</div>
                <div class="field-value">{{n-a @resource.estimated_service_life_distance}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Service Life Distance Unit</div>
                <div class="field-value">
                    {{n-a (get-fleet-ops-option-label "odometerUnits" @resource.estimated_service_life_distance_unit)}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Estimated Service Life (Months)</div>
                <div class="field-value">{{n-a @resource.estimated_service_life_months}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Purchase Date</div>
                <div class="field-value">
                    {{n-a (format-date-fns @resource.purchased_at "dd-MM-yyyy")}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Lease Expiry Date</div>
                <div class="field-value">
                    {{n-a (format-date-fns @resource.lease_expires_at "dd-MM-yyyy")}}
                </div>
            </div>

            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Financing (Loan)
            </div>

            <div class="field-info-container">
                <div class="field-name">Loan Amount</div>
                <div class="field-value">
                    {{format-currency @resource.loan_amount @resource.currency}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Number of Payments</div>
                <div class="field-value">{{n-a @resource.loan_number_of_payments}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">First Payment Date</div>
                <div class="field-value">
                    {{n-a (format-date-fns @resource.loan_first_payment "dd-MM-yyyy")}}
                </div>
            </div>
        </div>
    </ContentPanel>

    {{! CUSTOM FIELDS (view mode) }}
    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />

    {{! ORCHESTRATOR CONSTRAINTS (read-only view) }}
    {{#if (or @resource.skills.length @resource.time_window_start @resource.time_window_end @resource.max_tasks)}}
        <ContentPanel @title="Orchestrator Constraints" @open={{true}} @wrapperClass="bordered-top">
            <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
                {{#if @resource.skills.length}}
                    <div class="field-info-container col-span-2">
                        <div class="field-name">Skills & Capabilities</div>
                        <div class="field-value">{{join @resource.skills ", "}}</div>
                    </div>
                {{/if}}
                {{#if (or @resource.time_window_start @resource.time_window_end)}}
                    <div class="field-info-container">
                        <div class="field-name">Available From</div>
                        <div class="field-value">{{n-a @resource.time_window_start}}</div>
                    </div>
                    <div class="field-info-container">
                        <div class="field-name">Available Until</div>
                        <div class="field-value">{{n-a @resource.time_window_end}}</div>
                    </div>
                {{/if}}
                {{#if @resource.max_tasks}}
                    <div class="field-info-container">
                        <div class="field-name">Max Tasks</div>
                        <div class="field-value">{{@resource.max_tasks}}</div>
                    </div>
                {{/if}}
            </div>
        </ContentPanel>
    {{/if}}

    {{! AVATAR }}
    <ContentPanel @title={{t "common.avatar"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="flex px-1">
            <div class="border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-600 rounded-lg flex items-center justify-center">
                <div class="flex items-center justify-center h-20 w-24">
                    <Image
                        alt={{@resource.displayName}}
                        src={{or @resource.avatar_custom_url @resource.avatar_url}}
                        @fallbackSrc={{config "defaultValues.vehicleAvatar"}}
                        class="w-12 h-12"
                    />
                </div>
            </div>
        </div>
    </ContentPanel>

    <RegistryYield @registry="fleet-ops:component:vehicle:details" as |RegistryComponent|>
        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
    </RegistryYield>

    {{! METADATA }}
    <ContentPanel
        @title={{t "common.metadata"}}
        @open={{true}}
        @actionButtons={{this.metadataButtons}}
        @wrapperClass="bordered-top"
        @panelBodyWrapperClass={{unless (is-object-empty @resource.meta) "px-0i" ""}}
    >
        <MetadataViewer @metadata={{@resource.meta}} />
    </ContentPanel>

    <Spacer @height="300px" />
</div>
