<%- include("./includes/header.ejs") %>
<div class="promotedbots">
  <% var nbots=bots.filter(a=> a.promoted == true)
      nbots.forEach((val, key) => {
      randomIndex = Math.ceil(Math.random()*(key + 1));
      nbots[key] = nbots[randomIndex];
      nbots[randomIndex] = val;
      });
      if(nbots.length > 0) { %>
  <div class="mx-auto text-center">
    <br>
    <h2 class="text-xl text-white text-center"><i class="fa fa-bullhorn" aria-hidden="true"></i> Promoted Bots
    </h2>
    <p class="content text-white text-center" style="opacity:.6">These bots are featured on BotsCord!</p>
  </div>
  <div class="grid columns items-center content-center justify-center grid-cols-1 gap-4 col-auto sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-8">
    <% } %>
    <% for(let i=0; i < nbots.length; i++) { if (i===3) break; var bot=nbots[i]; if(bot) { %>
    <% getBot = global.bsl.users.cache.get(bot.id); %>

    <div class="transition-shadow ease-in-out duration-300 hover:shadow-blue-900 shadow-2xl rounded-lg max-w-sm bg-blue-color " onclick="location.href='/bot/<%=bot.id%> ';" style="cursor: pointer;">
      <img class="w-full rounded-full" src="<%= getBot.avatar ? 'https://cdn.discordapp.com/avatars/' +bot.id +'/'+getBot.avatar + '.webp?size=1024' : '/img/logo.webp' %>" onerror="this.src='/img/logo.webp'" alt=" <%= bot.name %>">
      <div class="px-6 text-white text-base">
        <p><i class="fa-solid fa-check-to-slot"></i>: <%= bot.votes || 0 %> <%if(bot.servers) { %><i class="fa fa-server"></i>: <%= bot.servers %><% } %>
        </p>
      </div>
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-white">
          <%= bot.name %>
        </div>
        <p class="text-white text-base">
          <%= bot.description %>
        </p>
      </div>
      <% if(bot.tags) {%>
      <div class="px-6 pt-4 pb-2">
        <% bot.tags.slice(-3).forEach(tag=>{ %>
        <a href="/tag/<%= tag %>" class="inline-block bg-button-primary rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#<%= tag %>
        </a>
        <% }) %>
      </div>
      <% } %>
    </div>
    <% } %>
    <% } %>
  </div>
</div>
<div class="randombots">
  <% var nbots=bots.filter(a=> a.verified == true)
      nbots.forEach((val, key) => {
      randomIndex = Math.ceil(Math.random()*(key + 1));
      nbots[key] = nbots[randomIndex];
      nbots[randomIndex] = val;
      });
      if(nbots.length > 0) { %>
  <div class="mx-auto text-center">
    <br>
    <h2 class="text-xl text-white text-center"><i class="fa fa-shuffle" aria-hidden="true"></i> Random Bots
    </h2>
    <p class="content text-white text-center" style="opacity:.6">We rolled the dice and got this nice bots!</p>
  </div>
  <div class="grid columns items-center content-center justify-center grid-cols-1 gap-4 col-auto sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-8">
    <% } %>
    <% for(let i=0; i < nbots.length; i++) { if (i===3) break; var bot=nbots[i]; if(bot) { %>
    <% getBot = global.bsl.users.cache.get(bot.id); %>
    <div class="transition-shadow ease-in-out duration-300 hover:shadow-blue-900 shadow-2xl rounded-lg max-w-sm bg-blue-color " onclick="location.href='/bot/<%=bot.id%> ';" style="cursor: pointer;">
      <img class="w-full rounded-full" src="<%= getBot.avatar ? 'https://cdn.discordapp.com/avatars/' +bot.id +'/'+getBot.avatar + '.webp?size=1024' : '/img/logo.webp' %>" onerror="this.src='/img/logo.webp'" alt=" <%= bot.name %>">
      <div class="px-6 text-white text-base">
        <p><i class="fa-solid fa-check-to-slot"></i>: <%= bot.votes || 0 %> <%if(bot.servers) { %><i class="fa fa-server"></i>: <%= bot.servers %><% } %>
        </p>
      </div>
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-white">
          <%= getBot.username %>
        </div>
        <p class="text-white text-base">
          <%= bot.description %>
        </p>
      </div>
      <% if(bot.tags) {%>
      <div class="px-6 pt-4 pb-2">
        <% bot.tags.slice(-3).forEach(tag=>{ %>
        <a href="/tag/<%= tag %>" class="inline-block bg-button-primary rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#<%= tag %>
        </a>
        <% }) %>
      </div>
      <% } %>
    </div>
    <% } } %>
  </div>
</div>
<%- include('./includes/footer.ejs') %>