<div class="space-y-8">
  <div class="flex justify-between items-center">
    <h1 class="text-3xl font-bold"><%= @city.name %></h1>
    <%= link_to "Back to Cities", cities_path, class: "btn btn-ghost" %>
  </div>

  <div class="stats shadow">
    <div class="stat">
      <div class="stat-title">Latitude</div>
      <div class="stat-value"><%= @city.latitude %></div>
    </div>
    <div class="stat">
      <div class="stat-title">Longitude</div>
      <div class="stat-value"><%= @city.longitude %></div>
    </div>
  </div>

  <div class="space-y-4">
    <h2 class="text-2xl font-bold">Weather Art History</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <% @city.weather_arts.order(weather_date: :desc).each do |art| %>
        <div class="card bg-base-200">
          <figure>
            <% if art.image.attached? %>
              <%= image_tag art.image, class: "w-full h-48 object-cover" %>
            <% end %>
          </figure>
          <div class="card-body">
            <h3 class="card-title"><%= art.weather_date.strftime("%Y-%m-%d") %></h3>
            <p><%= art.description %></p>
            <div class="stats stats-vertical shadow">
              <div class="stat">
                <div class="stat-title">Temperature</div>
                <div class="stat-value"><%= art.temperature %>°C</div>
              </div>
              <div class="stat">
                <div class="stat-title">Humidity</div>
                <div class="stat-value"><%= art.humidity %>%</div>
              </div>
            </div>
            <div class="card-actions justify-end">
              <%= link_to "View Details", city_weather_art_path(@city, art), class: "btn btn-primary" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>