<div class="p-4">
    <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.reporter"}}</div>
                <div class="field-value">{{n-a @issue.reporter_name}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.assigned"}}</div>
                <div class="field-value">{{n-a @issue.assignee_name}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.driver"}}</div>
                <div class="field-value">{{n-a @issue.driver_name}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.vehicle"}}</div>
                <div class="field-value">{{n-a @issue.vehicle_name}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.type"}}</div>
                <div class="field-value">{{n-a @issue.type}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.category"}}</div>
                <div class="field-value">{{n-a @issue.category}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.priority"}}</div>
                <div class="field-value">
                    <Badge @status={{@issue.priority}} />
                </div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.date-created"}}</div>
                <div class="field-value">{{@issue.createdAtShort}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.coordinates"}}</div>
                <div class="field-value">{{point-coordinates @issue.location}}</div>
            </div>
            <div class="field-info-container col-span-2">
                <div class="field-name">{{t "fleet-ops.component.issue-panel.details.report"}}</div>
                <div class="field-value">{{n-a @issue.report}}</div>
            </div>
        </div>
    </ContentPanel>
</div>