<div class="details-wrapper" ...attributes>
    <ContentPanel @title={{t "driver.fields.user-account"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
            <div class="field-info-container md:col-span-3">
                <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.email"}}</div>
                <ClickToCopy @value={{@resource.email}} class="field-value">{{n-a @resource.email}}</ClickToCopy>
            </div>
            <div class="field-info-container">
                <div class="field-name">{{t "common.phone"}}</div>
                <ClickToCopy @value={{@resource.phone}} class="field-value">{{n-a @resource.phone}}</ClickToCopy>
            </div>
        </div>
    </ContentPanel>

    <ContentPanel @title={{t "driver.fields.driver-details"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
            <div class="field-info-container">
                <div class="field-name">{{t "common.id"}}</div>
                <ClickToCopy @value={{@resource.public_id}} class="field-value">{{n-a @resource.public_id}}</ClickToCopy>
            </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 "driver.fields.driver-license"}}</div>
                <div class="field-value">{{n-a @resource.drivers_license_number}}</div>
            </div>
            <div class="field-info-container">
                <div class="field-name">{{t "driver.fields.license-expiry"}}</div>
                <div class="field-value">{{n-a (format-date-fns @resource.license_expiry)}}</div>
            </div>
            <div class="field-info-container">
                <div class="field-name">{{t "resource.vendor"}}</div>
                <div class="field-value">{{n-a @resource.vendor_name}}</div>
            </div>
            <div class="col-span-3"></div>
            <div class="field-info-container">
                <div class="field-name">{{t "common.city"}}</div>
                <div class="field-value">{{n-a @resource.city}}</div>
            </div>
            <div class="field-info-container">
                <div class="field-name">{{t "common.country"}}</div>
                <div class="field-value">
                    <CountryName @country={{@resource.country}} />
                </div>
            </div>
            <div class="field-info-container md:col-span-3">
                <div class="field-name">{{t "common.coordinates"}}</div>
                <div class="field-value">{{point-coordinates @resource.location}}</div>
            </div>
        </div>
    </ContentPanel>
    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />

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

    {{! ORCHESTRATOR CONSTRAINTS (read-only view) }}
    {{#if (or @resource.skills.length @resource.max_distance @resource.max_travel_time)}}
        <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 & Certifications</div>
                        <div class="field-value">{{join @resource.skills ", "}}</div>
                    </div>
                {{/if}}
                {{#if @resource.max_travel_time}}
                    <div class="field-info-container">
                        <div class="field-name">Max Driving Time</div>
                        <div class="field-value">{{@resource.max_travel_time}} s</div>
                    </div>
                {{/if}}
                {{#if @resource.max_distance}}
                    <div class="field-info-container">
                        <div class="field-name">Max Distance</div>
                        <div class="field-value">{{@resource.max_distance}} m</div>
                    </div>
                {{/if}}
            </div>
        </ContentPanel>
    {{/if}}

    <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>
</div>
