<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-6 flex justify-between items-start">
    <div>
      <h1 class="text-2xl font-bold text-gray-900">Turn <%= @turn.number %> Details</h1>
      <%= link_to 'Back to Game', game_path(@turn.game), class: "mt-2 inline-block text-indigo-600 hover:text-indigo-900" %>
    </div>
    <div class="flex space-x-2">
      <%= link_to 'Edit', edit_turn_path(@turn), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
      <%= button_to "Destroy this turn", @turn, method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { turbo_confirm: "Are you sure?" } %>
    </div>
  </div>

  <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
    <div class="px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">SVG Orders Data</h3>
      <p class="mt-1 max-w-2xl text-sm text-gray-500">Stored SVG images for each power.</p>
    </div>
    <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
      <dl class="sm:divide-y sm:divide-gray-200">
        <% if @turn.svg_orders.present? %>
          <% @turn.svg_orders.each do |key, svg| %>
              <%= key %>
              <%= svg.html_safe %>
          <% end %>
        <% else %>
          <div class="py-4 sm:py-5 sm:px-6">
            <p class="text-sm text-gray-500">No SVG orders data found.</p>
          </div>
        <% end %>
      </dl>
    </div>
  </div>
  
  <div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">Debug Info</h3>
    </div>
    <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
      <pre class="text-xs bg-gray-100 p-2 rounded overflow-auto"><%= JSON.pretty_generate(@turn.attributes.except("svg_orders", "svg_date")) %></pre>
    </div>
  </div>
</div>
