<%- include('header'); -%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Meta Tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">        
        <link rel="stylesheet" href="/index.css">
        <title><%= bot.name %></title>    
    </head>
    <body>
        <!--HEADER-->
        
        <!--MAIN BODY-->
      <section>
        <% if(user && user.guilds && user.guilds.filter((guild) => botClient.guilds.cache.get(guild.id)).length > 0){ %>
          <div class="d-flex justify-content-center head">
              <h1><b>Servers We Both are in</b></h1>
          </div>
          <div class="d-flex justify-content-center">
            <p style="font-style: italic;">Those Servers are sorted, after the Queue Length, the Server with the biggest Queue is at the left!</p>
          </div>
          <div style="display: flex; flex-wrap: wrap; justify-content: center;">
            <%
              user.guilds
              .filter((guild) => botClient.guilds.cache.get(guild.id))
              .sort((a, b) => {
                let x = botClient.distube.getQueue(a.id) ? botClient.distube.getQueue(a.id).songs.length : 0
                let y = botClient.distube.getQueue(a.id) ? botClient.distube.getQueue(a.id).songs.length : 0
                return y  - x || -1
              })
              .forEach(guild => {
              %>
                <div class="card text-white bg-dark mb-3">
                <%- guild.icon ? `<img src="https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}" class="card-img-top" style="max-width: 250px;width: 250px;">` : `<img src="https://cdn.discordapp.com/attachments/765919453766352916/877787616974622770/wCfHtuoejLIbAAAAABJRU5ErkJggg.png" class="card-img-top" style="max-width: 250px;width: 250px;">` %>
                  <div class="card-img-overlay text-grey h-100 d-flex flex-column justify-content-end" style="background:#000000b0;max-width: 250px;width: 250px;">
                    <h5 class="card-title text-primary" style="font-size: 25px;"><%= guild.name %></h5>
                      <p class="card-text" style="font-size: 12px;font-style: italic;color: #b3b3b3">Show the current Queue of <b><%= guild.name %></b>'s with <b style="color:white"><%= botClient.distube.getQueue(guild.id) ? botClient.distube.getQueue(guild.id).songs.length : 0 %> Songs</b>!</p>
                      <a style="font-size: 25px;"
                        href="<%- bot.domain %>/queue/<%- guild.id %>" 
                        class="mt-auto btn btn-lg btn-block btn-success">
                        <i class="iconify" data-icon="ant-design:dashboard-filled"></i>Show Queue
                      </a>
     
                  </div>
                </div>
              <% });
              %>
          </div>
          <% }else {
          %>
        <div class="d-flex justify-content-center head"><h1><b>We do not share any Servers ;(</b></h1>
          <p>
            <button style="font-size: 50px;"
            onclick="window.open('https://discord.com/api/oauth2/authorize?client_id=<%= botClient.user.id %>&permissions=8&scope=bot%20applications.commands', '_blank')"
            class="btn btn-success" type="button"><i class="iconify" data-icon="carbon:add-filled"></i>
            Invite me!</button>
          </p>
        </div> 
        <%
        }  %>
      </section>
      <!-- FOOTER-->
      <section>
        <div class="card-footer" style="margin-top:15%;text-align: center;color: #5663f7;">
          <hr style="width: 75%;background-color: #FFFFFF!important;color: #FFFFFF!important;border: 5px solid #FFFFFF!important;border-radius:25px;margin-left: 12%;">
          <h4 style="margin-top:5%;">
            <img src="<%= botClient.user.displayAvatarURL({size: 4096}) %>" style="width: 4%;margin-top: -0.5%;"> <span style="font-size: 40px;"><%= botClient.user.username %> | Ultimate Music Experience</span>
          </h4>
          <h5 style="text-align: center;">
            <a href="https://github.com/Tomato6966/Musicium" target="_blank" style="font-size: 12px; color: #888a9b!important;text-decoration: none;">&copy; Copyright Musicium | All rights served.</a><br><br>
            <a href="https://github.com/Tomato6966/Musicium" target="_blank" style="font-size: 20px; color: #5663f7!important;text-decoration: none;">Developed by <code>Tomato#6966</code> | [Github]</a>
          </h5>
        </div>
      </section>

       <!--JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    </body>
</html>
