<!doctype html>
<html>
  <head>
    <title><%- client.users.cache.get(req.params.id).username %> | Beta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="<%- client.users.cache.get(req.params.id).displayAvatarURL({format:"png"})%>" />
    <meta name="og:description" content="<%- data.sdecs %>">
    <meta name="og:image" content="<%- client.users.cache.get(req.params.id).displayAvatarURL({format:"png"})%>" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  </head>
  <body>
    
    <nav class="navbar navbar-expand-sm navbar-dark">
      <div class="container">
        <a class="navbar-brand" href="/">List DiscordBot</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="/"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/discord"><i class="fab fa-discord"></i> Discord</a>
            </li>
            <% if(req.user) { %>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user-circle"></i> <%- req.user.username %>#<%- req.user.discriminator %>
              </a>
                <div class="dropdown-menu" style="background-color:#7289DA;" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item text-white" href="/user/<%-req.user.id%>"><i class="fas fa-id-card"></i> Profile</a>
                  <a class="dropdown-item text-white" href="/add"><i class="fas fa-plus-circle"></i> Add Bot</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item text-white" href="/logout"><i class="fas fa-sign-out-alt"></i> Logout</a>
                </div>
              </li>
            <% }else{ %>
            <li class="nav-item">
              <a class="nav-link" href="/login">Login</a>
            </li>
            <% } %>
          </ul>
        </div>
      </div>
    </nav>
    
    
    <div class="header">
      <center><img src="<%- client.users.cache.get(req.params.id).displayAvatarURL({format:"png", size:2048}) %>" class="avatar"></center>
      <div class="textname">
        <h2 class="botname"><%- client.users.cache.get(req.params.id).username %></h2>
        <p class="sdecs"><%- data.sdecs %></p><br />
        <% if(data.comment.length > 0) { %>
        <h3 class="totalRating"><% let a = ( 5 * data.comment.filter(x => x.rate == 5).length + 4 * data.comment.filter(x => x.rate == 4).length + 3 * data.comment.filter(x => x.rate == 3).length + 2 * data.comment.filter(x => x.rate == 2).length + 1 * data.comment.filter(x => x.rate == 1).length ) / ( data.comment.filter(x => x.rate == 5).length + data.comment.filter(x => x.rate == 4).length + data.comment.filter(x => x.rate == 3).length + data.comment.filter(x => x.rate == 2).length + data.comment.filter(x => x.rate == 1).length ) %> <%- a.toFixed(1) %> / 5 <i class="bi bi-star-fill" style="color:yellow;"></i></h3><br />
        <% } %>
        
      </div>
    </div>
    <div class="container-fluid">
      <br /><div class="alert alert-success" role="alert">
        You are in beta mode, there may still be some bugs in this mode, if you find them (bug), please contact us on Discord <a href="/discord" class="alert-link">Click here</a>.
      </div><br />
      <% if(locals.message.length > 0) { %>
      <div class="alert alert-danger" role="alert">
        <%- locals.message %>
      </div>
      <% } %>
      <div class="row">
        <div class="col-md-4">
          <div class="invite-vote">
            <a class="vote" href="/vote/<%-req.params.id%>"><span class="button-icon"><i class="fas fa-chevron-up"></i></span><span class="button-text">Vote</span></a>
            <a class="invite" href="<%-data.invite%>"><span class="button-icon"><i class="fas fa-plus"></i></span><span class="button-text">Invite</span></a>
          </div>
          
          <% if(data.ownerId == req.user.id) { %>
          <h5 class="cat"><i class="fas fa-cog"></i> Settings</h5>
          <a class="edit" href="/edit/<%-req.params.id%>"><span class="button-icon"><i class="fas fa-edit"></i></span><span class="button-text">Edit</span></a>
          <% } %>
          <h5 class="cat"><i class="fas fa-user"></i> Developer</h5>
          <a class="avatarDev" href="/user/<%- data.ownerId %>"><span class="button-avatar"><img src="<%- client.users.cache.get(data.ownerId).displayAvatarURL({dynamic:true, format:"png", size:2048}) %>"></span><span class="button-text"><%- client.users.cache.get(data.ownerId).tag %></span></a>
          <h5 class="cat"><i class="fas fa-info"></i> Overview</h5>
          <div class="prefix"><span class="prefix-icon"><i class="fas fa-thumbtack"></i></span><span class="prefix-text">Prefix</span><kbd class="float-right"><%- data.prefix %></kbd></div>
          <div class="library"><span class="library-icon"><i class="fas fa-bookmark"></i></span><span class="library-text">Library</span><kbd class="float-right"><%- data.library %></kbd></div>
          <div class="votes"><span class="vote-icon"><i class="fas fa-chevron-up"></i></span><span class="vote-text">Vote</span><kbd class="float-right"><%- data.vote %></kbd></div>
          
          <% if(data.supportServer || data.website) { %>
          <h5 class="cat"><i class="fas fa-link"></i> Links</h5>
          <% if(data.supportServer) { %>
          <a class="discord" href="https://discord.gg/<%- data.supportServer %>"><span class="discord-icon"><i class="fab fa-discord"></i></span><span class="discord-text">Support Server</span></a>
          <% } %>
          <% if(data.website) { %>
          <a class="website" href="<%- data.website %>"><span class="website-icon"><i class="fas fa-globe-asia"></i></span><span class="website-text">Website</span></a>
          <% } %>
          <% } %>
        </div>
        <div class="col-md-8">
          <div class="mt-4" style="word-wrap:break-word;background-color:#202225;padding:10px;">
            <%- description %>
          </div><br />
        </div>
      </div><br />
      
      <div class="komentar">
        <% if(req.user) { %>
        <% if(req.user.id === data.ownerId && data.comment.filter(x => x.id === req.user.id)) { %>
        
        <% } else { %>
        
        <div class="row">
          <div class="col-md-4">
            <h4 class="text-center">Write a comment about this bot and rate this bot</h4>
          </div>
          <div class="col-md-8">
            <form method="post" action="/bot/<%- req.params.id %>">
              <input type="hidden" value="<%- csrfToken %>" name="_csrf">
              <textarea class="writeComment" id="message" name="message" rows="5" required></textarea>
              <button class="submitComment" type="submit">Send</button>
              <div class="star-list">
                <input type="radio" name="rate" id="rate-5" value="5">
                <label for="rate-5" class="bi bi-star-fill"></label>
                <input type="radio" name="rate" id="rate-4" value="4">
                <label for="rate-4" class="bi bi-star-fill"></label>
                <input type="radio" name="rate" id="rate-3" value="3">
                <label for="rate-3" class="bi bi-star-fill"></label>
                <input type="radio" name="rate" id="rate-2" value="2">
                <label for="rate-2" class="bi bi-star-fill"></label>
                <input type="radio" name="rate" id="rate-1" value="1">
                <label for="rate-1" class="bi bi-star-fill"></label>
              </div>
            </form>
          </div>
        
        <% } %>
        
        <% } %>
          
          <% if(!data.comment.length) { %>
          <h3 style="margin-left:10px;">No comments yet</h3>
          <% }else{ %>
          <% data.comment.map((x, i) => { %>
          <div class="row" style="margin:7px;margin-bottom:30px;">
            <div class="col-3 col-md-1">
              <img src="<%- userComment.data[x.id].Avatar %>" class="img-avatar" alt="avatar">
            </div>
            <div class="col-9 col-md-11">
              <h4><%- userComment.data[x.id].Username %></h4>
              <p><%- x.message %></p>
              <div class="star-list-view" id="c<%-x.rate%>">
                <input type="radio" id="radio5" disabled>
                <label for="radio5" class="bi bi-star-fill"></label>
                <input type="radio" id="radio4" disabled>
                <label for="radio4" class="bi bi-star-fill"></label>
                <input type="radio" id="radio3" disabled>
                <label for="radio3" class="bi bi-star-fill"></label>
                <input type="radio" id="radio2" disabled>
                <label for="radio2" class="bi bi-star-fill"></label>
                <input type="radio" id="radio1" disabled>
                <label for="radio1" class="bi bi-star-fill"></label>
              </div>
            </div>
          </div>
          <% }) %>
          <% } %>
      </div>
      
    </div>
    <p><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code> <code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code><code></code></p>
      
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
      :root {
        --darkBackground:#292B2F;
        --navbarColor:#5865F2;
        --darkButNotBlack:#2f3136;
      }
      body {
        background-color:var(--darkBackground);
        color:#ffffff;
        font-weight:500;
        font-family:"Poppins", sans-serif;
      }
      h1, h2, h3, h4, h5, h6 {
        font-weight:800;
      }
      nav {
        background-color:var(--navbarColor) !important;
      }
      .header {
        background-color:var(--darkButNotBlack);
        box-shadow:0px 5px 10px rgba(0,0,0,0.3);
      }
      .img-avatar {
        width:60px;
        height:60px;
        border-radius:50%;
      }
      .writeComment {
        width:100%;
        color:white;
        outline:none;
        padding:10px;
        border-radius:6px;
        background-color:var(--darkButNotBlack);
      }
      .submitComment {
        padding:6px;
        background-color:#7289DA;
        color:white;
        border:none;
        font-weight:600;
        width:60px;
        border-radius:10px;
        outline:none;
        margin-top:10px;
        margin-bottom:20px;
      }
      .star-list label {
        padding:5px;
        float:right;
        transition:all 0.5s ease;
        font-size:15px;
        color:#444;
      }
      .star-list-view label {
        padding:5px;
        float:right;
        transition:all 0.2s ease;
        font-size:15px;
      }
      
      input {
        display:none;
      }
      input:checked ~ label {
        color:#fd4;
      }
      #rate-1:checked ~ .rating:before {
        content:"1";
      }
      #rate-2:checked ~ .rating:before {
        content:"2";
      }
      #rate-3:checked ~ .rating:before {
        content:"3";
      }
      #rate-4:checked ~ .rating:before {
        content:"4";
      }
      #rate-5:checked ~ .rating:before {
        content:"5";
      }
      #c5 #radio5 ~ label {
      color:#fd4;
    }
    #c4 #radio4 ~ label {
      color:#fd4;
    }
    #c3 #radio3 ~ label {
      color:#fd4;
    }
    #c2 #radio2 ~ label {
      color:#fd4;
    }
    #c1 #radio1 ~ label {
      color:#fd4;
    }
      .avatar {
        width:140px;
        height:140px;
        margin-top:20px;
        margin-bottom:10px;
        border-radius:50%;
        box-shadow:2px 2px 30px rgba(0,0,0,0.2);
      }
      .textname {
        text-align:center;
      }
      .invite-vote {
        width:100%;
        margin-top:26px;
      }
      .invite-vote a {
        color:white;
        text-decoration:none;
      }
      .invite-vote .invite {
        background-color:#00cc00;
        display:flex;
        margin-top:20px;
        width:100%;
        border-radius:5px;
      }
      .invite-vote .invite .button-icon {
        background-color:rgba(0,0,0,0.2);
        padding:7px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .invite-vote .invite .button-text {
        padding:7px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
      }
      .invite-vote .vote {
        background-color:#7289DA;
        display:flex;
        width:100% !important;
        border-radius:5px;
      }
      .invite-vote .vote .button-icon {
        background-color:rgba(0,0,0,0.2);
        padding:7px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .invite-vote .vote .button-text {
        padding:7px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
      }
      .edit {
        background-color:var(--darkButNotBlack);
        display:flex;
        color:white !important;
        text-decoration:none !important;
        width:100%;
        border-radius:5px;
      }
      .edit .button-icon {
        background-color:rgba(0,0,0,0.2);
        padding:7px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .edit .button-text {
        padding:7px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
      }
      .library {
        background-color:var(--darkButNotBlack);
        display:block;
        margin-top:15px;
        color:white !important;
        text-decoration:none !important;
        width:100%;
        padding:9px;
        padding-left:0;
        border-radius:5px;
      }
      .library-icon {
        background-color:rgba(0,0,0,0.3);
        padding:10px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .library-text {
        padding:10px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
      }
      .discord {
        background-color:var(--darkButNotBlack);
        display:flex;
        margin-top:15px;
        color:white !important;
        text-decoration:none !important;
        width:100%;
        border-radius:5px;
      }
      .discord .discord-icon {
        background-color:rgba(0,0,0,0.2);
        padding:9px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .discord .discord-text {
        padding:10px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
      }
      .website {
        background-color:var(--darkButNotBlack);
        display:flex;
        margin-top:15px;
        color:white !important;
        text-decoration:none !important;
        width:100%;
        border-radius:5px;
      }
      .website .website-icon {
        background-color:rgba(0,0,0,0.2);
        padding:8px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .website .website-text {
        padding:10px;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
      }
      .avatarDev {
        background-color:var(--darkButNotBlack);
        display:flex;
        color:white !important;
        text-decoration:none !important;
        width:100%;
        border-radius:5px;
      }
      .avatarDev .button-avatar img {
        width:40px;
        height:40px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .avatarDev .button-text {
        padding:7px;
        font-size:17px;
        font-weight:600;
      }
      .votes {
        background-color:var(--darkButNotBlack);
        display:block;
        color:white !important;
        text-decoration:none !important;
        margin-top:15px;
        width:100%;
        padding:8px;
        padding-left:0;
        border-radius:5px;
      }
      .votes .vote-icon {
        background-color:rgba(0,0,0,0.3);
        padding:9px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .votes .vote-text {
        padding:7px;
        font-size:14px;
        text-transform:uppercase;
        font-weight:600;
      }
      .prefix {
        background-color:var(--darkButNotBlack);
        display:block;
        color:white !important;
        text-decoration:none !important;
        width:100%;
        padding:9px;
        padding-left:0;
        border-radius:5px;
      }
      .prefix .prefix-icon {
        background-color:rgba(0,0,0,0.3);
        padding:10px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
      }
      .prefix .prefix-text {
        padding:7px;
        font-size:14px;
        font-weight:600;
        text-transform:uppercase;
      }
      .prefix .real-prefix {
        
      }
      .cat {
        margin-top:25px;
      }
      .sdecs {
        margin:20px;
      }
      @media only screen and (min-width: 960px) {
        .navbar .navbar-nav .nav-item {
          padding: 1em 0.7em;
        }
        .navbar {
          padding: 0;
        }
        .navbar .navbar-brand {
          padding: 0 0.7em;
        }
      }
      .navbar .navbar-nav .nav-item {
        position: relative;
      }
      .navbar .navbar-nav .nav-item::after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color:rgba(0,0,0,0.6);
        color: transparent;
        width: 0%;
        content: '';
        height: 2px;
        transition: all 0.5s;
      }
      .navbar .navbar-nav .nav-item.active::after {
        width: 100%;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
  </body>
</html>