<% if trip.path.present? %>
  <div
    id='map'
    class="w-full h-full md:min-h-64 rounded-lg z-0"
    data-controller="trips"
    data-trips-target="container"
    data-api_key="<%= trip.user.api_key %>"
    data-user_settings="<%= trip.user.safe_settings.settings.to_json %>"
    data-path="<%= trip.path.coordinates.to_json %>"
    data-started_at="<%= trip.started_at %>"
    data-ended_at="<%= trip.ended_at %>"
    data-timezone="<%= trip.user.timezone %>">
    <div data-trips-target="container" class="h-[25rem] w-full min-h-screen md:h-64">
    </div>
  </div>
<% else %>
  <div class="flex items-center justify-center h-full">
    <div class="text-center">
      <p class="text-base-content/60">Trip path is being calculated...</p>
      <div class="loading loading-spinner loading-lg mt-4"></div>
    </div>
  </div>
<% end %>
