<div class="space-y-8">
  <div class="flex justify-between items-center">
    <h1 class="text-3xl font-bold"><%= @weather_art.city.name %> - <%= @weather_art.weather_date.strftime("%Y-%m-%d") %></h1>
    <%= link_to "Back to City", city_path(@weather_art.city), class: "btn btn-ghost" %>
  </div>

  <div class="card lg:card-side bg-base-200 shadow-xl">
    <figure class="lg:w-1/2">
      <% if @weather_art.image.attached? %>
        <%= image_tag @weather_art.image, class: "w-full h-full object-cover" %>
      <% end %>
    </figure>
    <div class="card-body lg:w-1/2">
      <h2 class="card-title"><%= @weather_art.description %></h2>

      <div class="stats stats-vertical shadow">
        <div class="stat">
          <div class="stat-title">Temperature</div>
          <div class="stat-value"><%= @weather_art.temperature %>°C</div>
          <div class="stat-desc">Feels like <%= @weather_art.feeling_temp %>°C</div>
        </div>

        <div class="stat">
          <div class="stat-title">Wind</div>
          <div class="stat-value"><%= @weather_art.wind_scale %></div>
          <div class="stat-desc"><%= @weather_art.wind_speed %> km/h</div>
        </div>

        <div class="stat">
          <div class="stat-title">Humidity</div>
          <div class="stat-value"><%= @weather_art.humidity %>%</div>
        </div>

        <div class="stat">
          <div class="stat-title">Visibility</div>
          <div class="stat-value"><%= @weather_art.visibility %> km</div>
        </div>
      </div>

      <div class="mt-4">
        <h3 class="font-bold">AI Prompt:</h3>
        <p class="text-sm"><%= @weather_art.prompt %></p>
      </div>
    </div>
  </div>
</div>