<!doctype html>
<html>
  <head>
    <title><%- client.user.username %> | Add Bot - Beta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://cdn.discordapp.com/avatars/727893291265425469/b1842bb1c6b9452bb7e9556d25d703a8.png" />
    <meta name="og:description" content="Add your bot to the List DiscordBot">
    <meta name="og:image" content="<%- client.user.displayAvatarURL({fornat:'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/580640622235484161"><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="container"><br />
      <% if(client.guilds.cache.get("819924361183756349").members.cache.get(req.user.id) == undefined) { %>
      <div class="alert alert-primary" role="alert">
        You have to join the server first to add bot. <a href="#" class="alert-link">Join Now</a>.
      </div>
      <% } %>
    </div>
    
    <form method="post" action='/new' autocomplete="off">
    <div class="container">
      <div class="row">
        <div class="col-md-6 mb-3">
          <div clasd="input">
            <label for="id">Bot ID <span>*</span></label>
            <input class="input-text" name="id" id="id" placeholder="<%- client.user.id %>" autocomplete="off" required>
          </div>
        </div>
        <div class="col-md-6">
          <div class="input">
            <label for="prefix">Bot prefix <span>*</span></label>
            <input class="input-text" placeholder="!" id="prefix" name="prefix" autocomplete="off" required>
          </div>
        </div>
      </div>
      <input type='hidden' name='_csrf' value='<%- csrfToken %>'>
      <div class="input">
        <label for="shortDesc">Short description of your bot <span>*</span></label>
        <textarea name="shortDesc" id="shortDesc" maxlength="150" rows="4" placeholder="My bot already has 100+ commands that can be used on your server" required></textarea>
      </div>
      <div class="input">
        <label for="description">Description of your bot <span>*</span></label>
        <textarea name="description" id="description" minlength="200" rows="10" placeholder="These are some list commands from my bot" required></textarea>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="input">
            <label for="tags">Add some tags <span>*</span></label>
             <select class="form-control" id="tags" name="tags" multiple="" required>
               <% category.map(x => { %>
               <option><%- x.name %></option>
               <% }) %>
            </select>
          </div>
        </div>
        <div class="col-md-6">
          <div class="input">
            <label for="library">Library <span>*</span></label>
            <select class="form-control" id="library" name="library" required>
              <% lib.map(x => { %>
              <option><%- x.name %></option>
              <% }) %>
            </select>
          </div>
        </div>
      </div>
      
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="input">
            <label for="supportServer">Support Server</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="url">https://discord.gg/</span>
              </div>
              <input type="text" class="form-control" id="supportServer" name="supportServer" aria-describedby="url">
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="input">
            <label for="website">Website</label>
            <input type="text" id="website" name="website" placeholder="https://list-discordbot.ga/">
          </div>
        </div>
      </div>
      
      <div class="input">
        <label for="invite">Bot Invite</label>
        <input type="text" id="invite" name="invite" placeholder="https://discord.com/oauth2/authorize?client_id=<%-client.user.id%>&scope=bot&permissions=8">
        <p style="font-family:sans-serif" class="mt-2"><a href="https://discordapi.com/permissions.html">Invite generator</a></p>
      </div>
      
      <div class="footer-form">
        <div class="row">
          <div class="col-md-6">
            <h6><span style="color:red">*</span> = required</h6>
          </div>
          <div class="col-md-6">
            <button class="submit" type="submit">Add Bot</button>
          </div>
        </div>
      </div>
    </div>
    </form>
    
    <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;
        --darkButNotBlack:#2f3136;
        --navbarColor:#5865F2;
      }
      body {
        color:white;
        font-family:"Poppins";
        background-color:var(--darkBackground);
      }
      h1, h2, h3, h4, h5, h6 {
        font-weight:800;
      }
      nav {
        background-color:var(--navbarColor);
      }
      
      a, a:hover {
        color:#7289DA;
      }
      input {
        width:100%;
        padding:10px;
        border-radius:7px;
        border:1px solid rgba(225, 225, 225, 0.5) !important;
        outline:none !important;
        color:rgba(225, 225, 225, 0.8) !important;
        font-weight:500 !important;
        background-color:var(--darkButNotBlack) !important;
      }
      .input {
        margin-bottom:20px;
      }
      #supportServer {
        border-top-right-radius:7px;
        padding:23px !important;
        border-bottom-right-radius:7px;
      }
      #supportServer:focus {
        box-shadow:1px 1px 0px rgba(0,0,0,0);
      }
      .input-group-text {
        color:white !important;
        border:1px solid rgba(225, 225, 225, 0.5) !important;
        background-color:var(--darkBackground) !important;
      }
      .submit {
        color:white;
        border:none;
        border-radius:6px;
        padding:5px;
        width:150px;
        font-weight:600;
        float:right;
        transition:all 0.4s;
        background-color: var(--navbarColor);
      }
      .submit:hover {
        background-color:#7289DA;
        transform:scale(1.1);
      }
      textarea {
        width:100%;
        background-color:var(--darkButNotBlack);
        outline:none;
        border:1px solid rgba(225, 225, 225, 0.5);
        font-weight:500;
        
        color:rgba(225, 225, 225, 0.8);
        border-radius:7px;
        padding:10px;
      }
      textarea:hover, input:hover {
        border:1px solid rgba(225, 225, 225, 0.8) !important;
      }
      select {
        border:1px solid rgba(225, 225, 225, 0.5) !important;
        color:rgba(225, 225, 225, 0.8) !important;
        background-color:var(--darkButNotBlack) !important;
      }
      label {
        font-weight:600;
        color:rgba(225, 225, 225, 0.8);
      }
      label span {
        color:red;
      }
    </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>