Added Pokémon sprites to team show page

resources/views/teams/show.blade.php

@@ -1,25 +1,20 @@
 @extends("layout.app")
 
 @section("content")
-<div class="container mt-5">
-    <h1>{{ $team->name }}</h1>
+    <div class="container mt-5">
+        <h1>{{ $team->name }}</h1>
 
-    <p><strong>Creator :</strong> {{ $team->user->name }}</p>
+        <p><strong>Creator :</strong> {{ $team->user->name }}</p>
 
-    <a href="{{ route('teams.index') }}" class="btn btn-primary mb-3"><i class="bi bi-arrow-return-left"></i> Back to Teams</a>
+        <a href="{{ route('teams.index') }}" class="btn btn-primary mb-3"><i class="bi bi-arrow-return-left"></i> Back
+            to Teams</a>
 
-    <table class="table table-bordered">
-        <thead>
-        <tr>
-            <th>Nom</th>
-            <th>Types</th>
-        </tr>
-        </thead>
-        <tbody>
+        <div class="d-flex flex-wrap justify-content-center">
         @foreach($team->pokemons as $pokemon)
-            <tr>
-                <td>{{ $pokemon->name }}</td>
-                <td class="fixed-width">
+            <div class="card m-1">
+                <img class="card-img-top" src="/images/pokemon_sprites/{{$pokemon->sprite}}" alt="Sprite of {{$pokemon->name}}" style="object-fit: contain; aspect-ratio: 1/1" height="350px">
+                <div class="card-body">
+                    <h5 class="card-title">{{ $pokemon->name }}</h5>
                     <div class="type-wrapper">
                         <span class="type-tag" style="background-color: {{ $pokemon->type1->color }};">
                             {{ strtoupper($pokemon->type1->name) }}
@@ -30,10 +25,9 @@
                             </span>
                         @endif
                     </div>
-                </td>
-            </tr>
+                </div>
+            </div>
         @endforeach
-        </tbody>
-    </table>
-</div>
+        </div>
+    </div>
 @endsection