<div id="trip-summary" class="trip-summary-card">
    <h3 class="mb-4 text-lg font-semibold text-gray-900">Trip Summary</h3>
    <div class="trip-stats grid grid-cols-2 gap-4">
        <div class="trip-stat">
            <div class="trip-stat-value" id="total-distance">{{ summary.total_distance }}</div>
            <div class="trip-stat-label">Total Miles</div>
        </div>
        <div class="trip-stat">
            <div class="trip-stat-value" id="total-time">{{ summary.total_time }}</div>
            <div class="trip-stat-label">Drive Time</div>
        </div>
        <div class="trip-stat">
            <div class="trip-stat-value" id="total-parks">{{ summary.total_parks }}</div>
            <div class="trip-stat-label">Parks</div>
        </div>
        <div class="trip-stat">
            <div class="trip-stat-value" id="total-rides">{{ summary.total_rides }}</div>
            <div class="trip-stat-label">Total Rides</div>
        </div>
    </div>
</div>
