{{< home}}
 {{$body}}
   <div class='container mx-auto px-4 py-8 text-white'>
     <div class='grid gap-4'>
       {{#results_data}}
         <div class='flex items-center gap-6 p-6 bg-gray-800/40 rounded-lg shadow hover:shadow-md transition-shadow'>
           <div class='text-2xl font-bold text-gray-400 w-8'>
             {{rank}}
           </div>
           <img src='{{sprite}}' alt='{{name}}' loading='lazy' class='w-20 h-20'>
           <div class='flex-grow'>
             <div class='text-gray-400 text-sm'>#{{id}}</div>
             <h2 class='text-xl font-semibold capitalize'>{{name}}</h2>
           </div>
           <div class='text-right'>
             <div class='text-2xl font-bold text-blue-400'>
               {{#win_pct}}{{win_pct}}%{{/win_pct}}{{^win_pct}}n/a{{/win_pct}}
             </div>
             <div class='text-sm text-gray-400'>
               {{wins}}W - {{losses}}L
             </div>
           </div>
         </div>
       {{/results_data}}
     </div>
   </div>
 {{/body}}
{{/home}}