<div id="<%= dom_id stat %>" class="card w-full bg-base-200 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">
      <%= link_to map_url(month_timespan(stat)), class: "underline hover:no-underline text-#{header_colors.sample}" do %>
        <%= "#{Date::MONTHNAMES[stat.month]} of #{stat.year}" %>
      <% end %>
    </h2>
    <p><%= stat.distance %>km</p>
    <% if REVERSE_GEOCODING_ENABLED %>
      <div class="card-actions justify-end">
        <%= countries_and_cities_stat_for_month(stat) %>
      </div>
    <% end %>
    <% if stat.daily_distance %>
      <%= column_chart(
        stat.daily_distance,
        height: '100px',
        suffix: ' km',
        xtitle: 'Days',
        ytitle: 'Distance'
      ) %>
    <% end %>
  </div>
</div>
