<!DOCTYPE html>
<html>
 <head>
   <title>Roundest (MaCH Version)</title>
   {{> htmx }}
   {{> tailwind }}
 </head>
 <body hx-boost='true'>
   <div class='bg-gray-950 text-white flex flex-col justify-between font-geist min-h-screen border-t-2 border-red-300'>
     <nav class='flex flex-row justify-between items-center py-4 px-8'>
       <div class='flex items-baseline'>
         <a href='{{url:home}}' class='font-bold text-3xl'>
           Round<span class='text-red-300'>est</span>
         </a>
         <p class='text-gray-400 font-extralight pl-2 text-2xl'>
           (MaCH Version)
         </p>
       </div>
       <div class='flex flex-row items-center gap-8'>
         <a href='{{url:results}}' class='hover:underline text-lg'>Results</a>
       </div>
     </nav>
     <main>
       {{$body}}
         <div class='container mx-auto px-4'>
           <h1 class='text-3xl font-bold text-center mb-8'>Vote for which is roundest</h1>
           <div class='flex justify-center gap-16 items-center min-h-[80vh]'>
             {{#challengers}}
               <form action='{{url:home}}' method='post'>
                 <div class='flex flex-col items-center gap-4'>
                   <img src='{{sprite}}' alt='{{name}}' class='w-64 h-64 sprite'>
                   <div class='text-center'>
                     <span class='text-gray-500 text-lg'>#{{id}}</span>
                     <h2 class='text-2xl font-bold capitalize'>{{name}}</h2>
                     <input type='hidden' name='winner' value='{{id}}'>
                     <input type='hidden' name='loser' value='{{opponent_id}}'>
                     <button class='mt-4 px-8 py-3 bg-blue-500 text-white rounded-lg text-lg font-semibold hover:bg-blue-600 transition-colors'>
                       Vote
                     </button>
                   </div>
                 </div>
               </form>
             {{/challengers}}
           </div>
         </div>
       {{/body}}
     </main>
     <footer class='font-light text-center py-3 text-gray-500'>
       <a href='https://code.nightshadecoder.dev/nightshade/nerak' target='_blank'>Gitea</a>
     </footer>
   </div>
 </body>
</html>
