turbovault-app/app/views/games/show.html.erb

<div class="max-w-4xl mx-auto">
  <div class="bg-white p-6 rounded-lg shadow">
    <div class="flex justify-between items-start mb-6">
      <div class="flex gap-6">
        <!-- IGDB Cover Image -->
        <% if @game.igdb_game&.cover_url.present? %>
          <div class="flex-shrink-0">
            <%= image_tag @game.igdb_game.cover_image_url("cover_big"), 
                alt: @game.title,
                class: "w-32 h-44 object-cover rounded-lg shadow-lg" %>
            <div class="mt-2 text-center">
              <span class="text-xs text-gray-500 flex items-center justify-center gap-1">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"/>
                </svg>
                IGDB
              </span>
            </div>
          </div>
        <% end %>
        
        <!-- Title and Platform -->
        <div>
          <h1 class="text-3xl font-bold mb-2"><%= @game.title %></h1>
          <p class="text-gray-600 mb-2"><%= @game.platform.name %></p>
          
          <!-- IGDB Match Status -->
          <% if @game.igdb_id.present? %>
            <div class="flex items-center gap-2 mb-2">
              <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded">
                ✓ IGDB Matched
              </span>
              <% if @game.igdb_match_confidence %>
                <span class="text-xs text-gray-500">
                  <%= @game.igdb_match_confidence.to_i %>% confidence
                </span>
              <% end %>
            </div>
            
            <!-- IGDB Release Date -->
            <% if @game.igdb_game&.first_release_date %>
              <p class="text-sm text-gray-600">
                <strong>Released:</strong> <%= @game.igdb_game.first_release_date.strftime("%B %Y") %>
              </p>
            <% end %>
          <% elsif current_user.igdb_sync_enabled? %>
            <div class="flex items-center gap-2">
              <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                No IGDB Match
              </span>
              <%= link_to "Find Match", igdb_matches_path, class: "text-xs text-indigo-600 hover:text-indigo-800" %>
            </div>
          <% end %>
        </div>
      </div>
      
      <div class="flex space-x-2">
        <%= link_to "Edit", edit_game_path(@game), class: "px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700" %>
        <%= button_to "Delete", @game, method: :delete, data: { turbo_confirm: "Are you sure you want to delete '#{@game.title}'? This will permanently remove it from your collection." }, class: "px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" %>
      </div>
    </div>
    
    <!-- IGDB Summary -->
    <% if @game.igdb_game&.summary.present? %>
      <div class="mb-6 p-4 bg-gray-50 rounded-lg border-l-4 border-indigo-500">
        <h3 class="text-sm font-semibold text-gray-700 mb-2">About this game (from IGDB)</h3>
        <p class="text-gray-700 text-sm leading-relaxed"><%= @game.igdb_game.summary %></p>
      </div>
    <% end %>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Format</label>
        <span class="px-3 py-1 inline-flex text-sm font-semibold rounded-full <%= @game.physical? ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800' %>">
          <%= @game.format.titleize %>
        </span>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Date Added</label>
        <p class="text-gray-900"><%= @game.date_added.strftime("%B %d, %Y") %></p>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Completion Status</label>
        <p class="text-gray-900"><%= @game.completion_status&.titleize || "Not set" %></p>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Rating</label>
        <p class="text-gray-900"><%= @game.user_rating ? "⭐ #{@game.user_rating}/5" : "Not rated" %></p>
      </div>
    </div>
    
    <% if @game.genres.any? %>
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">Genres</label>
        <div class="flex flex-wrap gap-2">
          <% @game.genres.each do |genre| %>
            <span class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm"><%= genre.name %></span>
          <% end %>
        </div>
      </div>
    <% end %>
    
    <% if @game.physical? %>
      <div class="mb-6">
        <h2 class="text-xl font-bold mb-3">Physical Details</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Condition</label>
            <p class="text-gray-900"><%= @game.condition&.titleize || "Not specified" %></p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Price Paid</label>
            <p class="text-gray-900"><%= @game.price_paid ? "$#{sprintf("%.2f", @game.price_paid)}" : "Not specified" %></p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
            <p class="text-gray-900"><%= @game.location || "Not specified" %></p>
          </div>
        </div>
      </div>
    <% end %>
    
    <% if @game.digital? %>
      <div class="mb-6">
        <h2 class="text-xl font-bold mb-3">Digital Details</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Digital Store</label>
            <p class="text-gray-900"><%= @game.digital_store || "Not specified" %></p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Price Paid</label>
            <p class="text-gray-900"><%= @game.price_paid ? "$#{sprintf("%.2f", @game.price_paid)}" : "Not specified" %></p>
          </div>
        </div>
      </div>
    <% end %>
    
    <% if @game.notes.present? %>
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
        <p class="text-gray-900 whitespace-pre-wrap"><%= @game.notes %></p>
      </div>
    <% end %>
    
    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Collections</label>
      <% if @game.collections.any? %>
        <div class="flex flex-wrap gap-2">
          <% @game.collections.each do |collection| %>
            <%= link_to collection.name, collection, class: "px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm hover:bg-indigo-200" %>
          <% end %>
        </div>
      <% else %>
        <p class="text-gray-500 text-sm">Not in any collections. <%= link_to "Edit game", edit_game_path(@game), class: "text-indigo-600 hover:text-indigo-800" %> to add to collections.</p>
      <% end %>
    </div>
    
    <div class="mt-6 pt-6 border-t">
      <%= link_to "← Back to Games", games_path, class: "text-indigo-600 hover:text-indigo-800" %>
    </div>
  </div>
</div>