<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="grid grid-cols-2 flex-col md:flex-row gap-2 mb-6">
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.id"}}</div>
                <div class="field-value">{{n-a @options.fuelReport.public_id}}</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 @options.fuelReport.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 @options.fuelReport.vehicle_name}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.odometer"}}</div>
                <div class="field-value">{{n-a @options.fuelReport.odometer}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.common.cost"}}</div>
                <div class="field-value">{{format-currency @options.fuelReport.amount @options.fuelReport.currency}}</div>
            </div>
            <div class="field-info-container space-y-2">
                <div class="field-name">{{t "fleet-ops.component.modals.fuel-report-details.fuel"}}</div>
                <div class="field-value">{{pluralize (n-a @options.fuelReport.volume) (n-a @options.fuelReport.metric_unit)}}</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">{{@options.fuelReport.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 @options.fuelReport.location}}</div>
            </div>
        </div>
    </div>
</Modal::Default>