add media to WowPet and pagination

app/controllers/wow_pets_controller.rb

@@ -1,6 +1,6 @@
 class WowPetsController < ProtectedController
   def index
-    @wow_pets = WowPet.all
+    @pagy, @wow_pets = pagy(WowPet.all, items: 12)
   end
 
   def show

app/views/wow_mounts/index.html.erb

@@ -4,7 +4,7 @@
 <% @wow_mounts.each do |mount| %>
   <div class="col-2 d-flex justify-content-center">
     <div class="card" style="width: 18rem;">
-      <img src=<%= mount.asset_zoom %> class="card-img-top" alt="<%= mount.name %>-zoom-image">
+      <img src=<%= mount.asset_zoom %> class="card-img-top" alt="mount-<%= mount.id %>-zoom-image">
       <div class="card-body">
         <h5 class="card-title"><%= mount.name %></h5>
         <p class="card-text"><%= mount.description %></p>

app/views/wow_pets/index.html.erb

@@ -1,20 +1,17 @@
 <h2>Pet list</h2>
 
-<table class="table table-hover table-dark table-image">
-  <thead>
-    <tr>
-      <th scope="col"><%= t('wow_pets.pet_list.name') %></th>
-      <th scope="col"><%= t('wow_pets.pet_list.description') %></th>
-      <th scope="col"><%= t('wow_pets.pet_list.owned') %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% @wow_pets.each do |pet| %>
-    <tr>
-        <td><%= link_to pet.name, pet %></td>
-        <td><%= pet.description %></td>
-        <td></td>
-    </tr>
-    <% end %>
-  </tbody>
-</table>
+<div class="row">
+<% @wow_pets.each do |pet| %>
+  <div class="col-2 d-flex justify-content-center">
+    <div class="card" style="width: 18rem;">
+      <img src=<%= pet.media_zoom_url %> class="card-img-top" alt="pet-<%= pet.id %>-zoom-image">
+      <div class="card-body">
+        <h5 class="card-title"><%= pet.name %></h5>
+        <p class="card-text"><%= pet.description %></p>
+        <%= link_to 'Detail', pet, class: "btn btn-primary" %>
+      </div>
+    </div>
+  </div>
+<% end %>
+<%== pagy_bootstrap_nav(@pagy) %>
+</div>

app/views/wow_pets/show.html.erb

@@ -2,7 +2,7 @@
   <div class="col-5">
     <div class="card">
       <% if @wow_pet.icon %>
-        <img src=<%= @wow_pet.icon %> class="card-img-top" alt="pet-icon-image">
+        <img src=<%= @wow_pet.media_zoom_url %> class="card-img-top" alt="pet-icon-image">
       <% end %>
       <div class="card-body">
         <h5 class="card-title"><%= @wow_pet.name %></h5>

app/workers/wow_pet_detail_worker.rb

@@ -31,6 +31,14 @@ class WowPetDetailWorker < WowSidekiqWorker
       end
     end
 
+    unless pet.creature_display_id
+      creature = RBattlenet::Wow::Creature.find(pet.creature_id)
+      pet.creature_display_id = creature.creature_displays.first.id if creature.status_code == 200
+    end
+
+    creature_media = RBattlenet::Wow::CreatureMedia.find(pet.creature_display_id)
+    pet.media_zoom_url = creature_media.assets.first.value if creature_media.status_code == 200
+
     if result.abilities
       result.abilities.each do |ability|
         next unless (local_ability = WowPetAbility.where(ability_id: ability.ability.id).first)