<%- include('parts/head', {bot, user, path}) %>
<%- include('parts/section') %>



<div class="container">
<br><br>
<div class="column">
    <p class="has-text-white title is-large"><i class="fad fa-badge-check bodyIcon"></i>&nbsp;Certified Bots</p>
    <p class="content has-text-white" style="margin-top: -20px;">They are ranked according to the votes they received.</p>
    <div class="columns is-multiline is-desktop is-variable is-7 pt-5">
        <% botdata.filter(a => a.certificate == "Certified").sort((a, b) => b.votes - a.votes).slice(0, 6).map(a => {%>
      <div class="col-md-6 col-lg-4 pb-3">
        <div data-aos="fade-left">
        <div class="card vcodes-card-custom bg-vcodes border-white border-0">
          <div class="vcodes-card-custom-img" onerror="backImgError(this);" style="background-image: url(<%= a.backURL || '../img/undefined_back.png' %>);" title="vCodes.xyz" ></div>
          <div class="vcodes-card-custom-avatar">
            <img class="img-fluid" title="Discord Bot Avatar" onerror="imgError(this);" src="<%=a.avatar%>" alt="Avatar" />
          </div>
          <div class="card-body">
           <div class="is-pulled-right mt-vcodes mt-1">
            <span data-tooltip="Votes this Month" data-tooltip-location="left" class="badge badge-stats mb-vcodes mt-1 w-100"><i class="fad fa-chevron-up"></i>&nbsp;<%= a.votes || "0" %></span>
            <span data-tooltip="Server Count" data-tooltip-location="left" class="badge badge-stats mt-1 w-100"><i class="fad fa-server"></i>&nbsp;<%= a.serverCount || "N/A" %></span>
              </div>
            <p translate="no" class="card-title is-size-4"><%= a.username %>
            <% if(a.certificate === "Certified") { %>
              <span data-tooltip="Verified Bot" data-tooltip-location="top"><i class="fad fa-badge-check bodyIcon"></i></span>
            <% } %>
            </p>
            <p translate="no" class="card-text vCodesbotDesc"><%= a.shortDesc %></p>
          </div>
          <div class="card-footer">
            <a title="vcodes" href="/bot/<%=a.botID%>" class="btn  btn-bot">View</a>
            <a title="vcodes" href="/bot/<%=a.botID%>/invite" class="btn  btn-bot">Invite</a>
          </div>
        </div>
      </div>
      </div>
            <% }) %>
             </div>
</div>
  <% if(botdata.filter(a => a.certificate == "Certified").length > 6) { %>
  <center>
    <a title="vcodes" href="/bots/certified" class="btn btn-more has-text-white">Show more certified bots</a>
  </center>
  <% } %>
<br><br><br><br>
<div class="column">
    <p class="has-text-white title is-large"><i class="fad fa-fire bodyIcon"></i>&nbsp;Most Popular Bots</p>
    <p class="content has-text-white" style="margin-top: -20px;">They are ranked according to the votes they received.</p>
  </div>
  <div class="columns is-multiline is-desktop is-variable is-7 pt-5">
    <% botdata.sort((a, b) => b.votes - a.votes).slice(0, 6).filter(a => a.status == "Approved").map(a => {%>
      <div class="col-md-6 col-lg-4 pb-3">
        <div data-aos="fade-left">
        <div class="card vcodes-card-custom bg-vcodes border-white border-0">
          <div class="vcodes-card-custom-img" style="background-image: url(<%= a.backURL || '../img/undefined_back.png' %>);" title="Electron CodShare" ></div>
          <div class="vcodes-card-custom-avatar">
            <img class="img-fluid" onerror="imgError(this);" src="<%=a.avatar%>" title="Discord Bot Avatar" alt="Avatar" />
          </div>
          <div class="card-body">
           <div class="is-pulled-right mt-vcodes mt-1">
                <span data-tooltip="Votes this Month" data-tooltip-location="left" class="badge badge-stats mb-vcodes mt-1 w-100"><i class="fad fa-chevron-up"></i>&nbsp;<%= a.votes || "0" %></span>
                <span data-tooltip="Server Count" data-tooltip-location="left" class="badge badge-stats mt-1 w-100"><i class="fad fa-server"></i>&nbsp;<%= a.serverCount || "N/A" %></span>
              </div>
             <p translate="no" class="card-title is-size-4"><%= a.username %>
            <% if(a.certificate === "Certified") { %>
              <span data-tooltip="Verified Bot" data-tooltip-location="top"><i class="fad fa-badge-check bodyIcon"></i></span>
            <% } %>
            </p>
            <p translate="no" class="card-text vCodesbotDesc"><%= a.shortDesc %></p>
          </div>
          <div class="card-footer">
            <a title="vcodes" href="/bot/<%=a.botID%>" class="btn  btn-bot">View</a>
            <a title="vcodes" href="/bot/<%=a.botID%>/invite" class="btn  btn-bot">Invite</a>
          </div>
        </div>
        </div>
      </div>
    <% }) %>

         </div>
  <br><br><br><br>
<div class="column">
    <p class="has-text-white title is-large"><i class="fa fa-clock bodyIcon"></i>&nbsp;Last Added Bots</p>
    <p class="content has-text-white" style="margin-top: -20px;">They are listed according to the date they were added.</p>
  </div>
  <div class="columns is-multiline is-desktop is-variable is-7 pt-5">
    <% botdata.filter(a => a.status === "Approved").sort((a, b) => b.Date - a.Date).slice(0, 6).map(a => {%>
      <div class="col-md-6 col-lg-4 pb-3">
        <div data-aos="fade-left">
        <div class="card vcodes-card-custom bg-vcodes border-white border-0">
          <div class="vcodes-card-custom-img" style="background-image: url(<%= a.backURL || '../img/undefined_back.png' %>);" title="electron.tk" ></div>
          <div class="vcodes-card-custom-avatar">
            <img class="img-fluid" onerror="imgError(this);" src="<%=a.avatar%>" title="Discord Bot Avatar" alt="Avatar" />
          </div>
          <div class="card-body">
           <div class="is-pulled-right mt-vcodes mt-1">
                <span data-tooltip="Votes this Month" data-tooltip-location="left" class="badge badge-stats mb-vcodes mt-1 w-100"><i class="fad fa-chevron-up"></i>&nbsp;<%= a.votes || "0" %></span>
                <span data-tooltip="Server Count" data-tooltip-location="left" class="badge badge-stats mt-1 w-100"><i class="fad fa-server"></i>&nbsp;<%= a.serverCount || "N/A" %></span>
              </div>
            <p translate="no" class="card-title is-size-4"><%= a.username %>
            <% if(a.certificate === "Certified") { %>
              <span data-tooltip="Verified Bot" data-tooltip-location="top"><i class="fad fa-badge-check bodyIcon"></i></span>
            <% } %>
            </p>
            <p translate="no" class="card-text vCodesbotDesc"><%= a.shortDesc %></p>
          </div>
          <div class="card-footer">
            <a title="vcodes" href="/bot/<%=a.botID%>" class="btn  btn-bot">View</a>
            <a title="vcodes" href="/bot/<%=a.botID%>/invite" class="btn  btn-bot">Invite</a>
          </div>
        </div>
        </div>
      </div>
    <% }) %>
</div>
  
  
<br><br><br><br>
<div class="column">
    <p class="has-text-white title is-large"><i class="fa fa-random bodyIcon"></i>&nbsp;Random Bots</p>
    <p class="content has-text-white" style="margin-top: -20px;">They are listed according to random.</p>
  </div>
  <div class="columns is-multiline is-desktop is-variable is-7 pt-5">
    <%
        let randomBots = botdata.filter(a => a.status === "Approved")
        randomBots.forEach((val, key) => {
          randomIndex = Math.ceil(Math.random()*(key + 1));
          randomBots[key] = randomBots[randomIndex];
          randomBots[randomIndex] = val;
        });
    %>
    <% 
        for(let i = 0; i < randomBots.length; i++) {
        if (i === 6) break;
        let labBots = randomBots[i];
      if(labBots) {
    %>
    <% let a = labBots; %>
      <div class="col-md-6 col-lg-4 pb-3">
        <div data-aos="fade-left">
        <div class="card vcodes-card-custom bg-vcodes border-white border-0">
          <div class="vcodes-card-custom-img" style="background-image: url(<%= a.backURL || '../img/undefined_back.png' %>);" title="vCodes.xyz" ></div>
          <div class="vcodes-card-custom-avatar">
            <img class="img-fluid" title="Discord Bot Avatar" onerror="imgError(this);" src="<%=a.avatar%>" alt="Avatar" />
          </div>
          <div class="card-body">
           <div class="is-pulled-right mt-vcodes mt-1">
                <span data-tooltip="Votes this Month" data-tooltip-location="left" class="badge badge-stats mb-vcodes mt-1 w-100"><i class="fad fa-chevron-up"></i>&nbsp;<%= a.votes || "0" %></span>
                <span data-tooltip="Server Count" data-tooltip-location="left" class="badge badge-stats mt-1 w-100"><i class="fad fa-server"></i>&nbsp;<%= a.serverCount || "N/A" %></span>
              </div>
            <p translate="no" class="card-title is-size-4"><%= a.username %>
            <% if(a.certificate === "Certified") { %>
              <span data-tooltip="Verified Bot" data-tooltip-location="top"><i class="fad fa-badge-check bodyIcon"></i></span>
            <% } %>
            </p>
            <p translate="no" class="card-text vCodesbotDesc"><%= a.shortDesc %></p>
          </div>
          <div class="card-footer">
            <a title="vcodes" href="/bot/<%=a.botID%>" class="btn  btn-bot">View</a>
            <a title="vcodes" href="/bot/<%=a.botID%>/invite" class="btn  btn-bot">Invite</a>
          </div>
        </div>
      </div>
      </div>
    <% }} %>
</div>

</div>
<%- include('parts/foot') %>
