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

<%= link_to trip, class: "block hover:shadow-lg rounded-lg" do %>
  <div class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200" data-trip-id="<%= trip.id %>" id="trip-<%= trip.id %>">
    <div class="card-body">
      <h2 class="card-title justify-center">
        <span class="hover:underline"><%= trip.name %></span>
      </h2>
      <p class="text-sm text-gray-600 text-center">
        <%= "#{human_date(trip.started_at)} – #{human_date(trip.ended_at)}, #{trip.distance_in_unit(current_user.safe_settings.distance_unit).round} #{current_user.safe_settings.distance_unit}" %>
      </p>

      <div style="width: 100%; aspect-ratio: 1/1;"
            id="map-<%= trip.id %>"
            class="rounded-lg z-0"
            data-controller="trip-map"
            data-trip-map-trip-id-value="<%= trip.id %>"
            data-trip-map-path-value="<%= trip.path.coordinates.to_json %>"
            data-trip-map-api-key-value="<%= current_user.api_key %>"
            data-trip-map-user-settings-value="<%= current_user.safe_settings.settings.to_json %>"
            data-trip-map-timezone-value="<%= trip.user.timezone %>">
      </div>
    </div>
  </div>
<% end %>