  <turbo-stream action="replace" target="leaderboard_content"><template>
    <div id="leaderboard_content">
      <div class="mb-4 text-center">
        <span class="text-sm text-gray-600 dark:text-gray-400">
            Showing: Football Leaderboard
        </span>
      </div>

      <!-- Sort Options -->
      <div class="mb-6 flex justify-center space-x-2">
        <a data-turbo-stream="true" data-action="click-&gt;leaderboard#sort" class="px-4 py-2 rounded-lg font-medium text-sm transition-colors duration-150 bg-blue-600 text-white shadow-md" title="Sort by Total Wins" href="/leaderboard.turbo_stream?sort_by=wins&amp;sport_id=4">
          <span class="flex items-center space-x-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-11.25m0 11.25h-9m9-11.25a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3m9 0V9m0 0H9m7.5 0V5.25m0 3.75H9" />
            </svg>
            <span>Wins</span>
          </span>
</a>
        <a data-turbo-stream="true" data-action="click-&gt;leaderboard#sort" class="px-4 py-2 rounded-lg font-medium text-sm transition-colors duration-150 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600" title="Sort by G-CRED Rating" href="/leaderboard.turbo_stream?sort_by=rating&amp;sport_id=4">
          <span class="flex items-center space-x-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
            </svg>
            <span>G-Cred</span>
          </span>
</a>
        <a data-turbo-stream="true" data-action="click-&gt;leaderboard#sort" class="px-4 py-2 rounded-lg font-medium text-sm transition-colors duration-150 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600" title="Sort by Longest Streak" href="/leaderboard.turbo_stream?sort_by=streak&amp;sport_id=4">
          <span class="flex items-center space-x-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
            </svg>
            <span>Streak</span>
          </span>
</a>      </div>

        <div class="mb-6 bg-blue-50 dark:bg-blue-950 border-l-4 border-blue-400 dark:border-blue-500 p-4 rounded-r-lg">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-blue-400 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm text-blue-700 dark:text-blue-300">
                <strong>Want to compete?</strong> <a class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-200" href="/users/sign_up">Sign up</a> to start making picks and climb the leaderboard!
              </p>
            </div>
          </div>
        </div>

      <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
        <ol id="leaderboard_list" class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="p-4 text-center text-gray-600 dark:text-gray-400">No leaderboard data available for this filter.</li>
        </ol>
      </div>

      <div id="load_more_area" class="text-center mt-4 mb-4">
      <p class="text-gray-500 dark:text-gray-400 text-sm">End of leaderboard.</p>
</div>

    </div>
</template></turbo-stream>