dawarich/app/views/trips/_countries.html.erb

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
  <div class="card bg-base-200 shadow-lg">
    <div class="card-body p-4">
      <div class="stat-title text-xs">Distance</div>
      <div class="stat-value text-lg"><%= trip.distance_in_unit(distance_unit).round %> <%= distance_unit %></div>
    </div>
  </div>
  <div class="card bg-base-200 shadow-lg">
    <div class="card-body p-4">
      <div class="stat-title text-xs">Duration</div>
      <div class="stat-value text-lg"><%= trip_duration(trip) %></div>
    </div>
  </div>
  <div class="card bg-base-200 shadow-lg">
    <div class="card-body p-4">
      <div class="stat-title text-xs">Countries</div>
      <div class="stat-value text-lg">
        <% if trip.countries.any? %>
          <%= trip.countries.join(', ') %>
        <% elsif trip.visited_countries.present? %>
          <%= trip.visited_countries.join(', ') %>
        <% else %>
          <span class="text-xs">Countries are being calculated...</span>
          <span class="loading loading-dots loading-sm"></span>
        <% end %>
      </div>
    </div>
  </div>
</div>