<!-- add bots for the website -->
<%- include('../includes/header.ejs', {title: 'Add Bot'}) %>
<!-- create form -->
<div class="container-sm p-10">
  <form method="post" action="">
    <div class="grid md:grid-cols-2 md:gap-6">
      <div class="relative z-0 mb-6 w-full group">
        <input type="text" name="bot_name" id="bot_name" class="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-2  appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
        <label for="bot_name" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Bot Name</label>
      </div>
      <div class="relative z-0 mb-6 w-full group">
        <input type="text" name="bot_id" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm bg-transparent border-0 border-b-2 appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
        <label for="floating_last_name" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Bot ID</label>
      </div>
    </div>
    <div class="relative z-0 mb-6 w-full group">
      <textarea type="text" name="bot_description" id="bot_name" class="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-2  appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required rows="5"></textarea>
      <label for="bot_name" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Bot Description (MarkDown supported!)</label>
    </div>
    <div class="relative z-0 mb-6 w-full group">
      <input type="text" name="bot_short" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-2  appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required maxlength="100"/>
      <label for="bot_name" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Short Description (Will be show on home page, MaxLength: 100)</label>
    </div>
    <div class="relative z-0 mb-6 w-full group">
      <input type="text" name="bot_owners" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-2  appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
      <label for="bot_name" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Co-Owners (split with <strong>,</strong> )</label>
    </div>
    <div class="relative z-0 mb-6 w-full group">
      <input type="text" name="bot_prefix" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-2  appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
      <label for="bot_prefix" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Bot Prefix</label>
    </div>
    <div class="relative z-0 mb-6 w-full group">
      <input type="text" name="bot_invite" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-2  appearance-none text-white border-gray-600  focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
      <label for="bot_invite" class="peer-focus:font-medium absolute text-sm text-white duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Bot Invite Url</label>
    </div>
    <!-- tags -->
    <div class="relative z-0 mb-6 w-full group">
      <select multiple name="tags" class=" border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" required>
        <option value="moderation">Moderation</option>
        <option value="fun">Fun</option>
        <option value="utility">Utility</option>
        <option value="guard">Guard</option>
        <option value="game">Game</option>
        <option value="music">Music</option>
        <option value="leveling">Leveling</option>
        <option value="economy">Economy</option>
        <option value="minecraft">Minecraft</option>
        <option value="anime">Anime</option>
        <option value="invite">Invite</option>
        <option value="logging">Logging</option>
        <option value="web dashboard">Web Dashboard</option>
        <option value="reddit">Reddit</option>
        <option value="youtube">Youtube</option>
        <option value="twitch">Twitch</option>
        <option value="crypto">Crypto</option>
        <option value="roleplay">Roleplay</option>
      </select>
    </div>
    <div class="relative z-0 mb-6 w-full group">
      <label for="tos" class="ml-2 text-sm font-medium text-gray-300">Be adding a server you automatically to our <a href="/tos" target="_blank" class="text-blue-700 hover:text-blue-300">Terms of Service</a> and <a href="/privacy" target="_blank" class="text-blue-700 hover:text-blue-300">Privacy Policy</a></label>
    </div>
    <button type="submit" class="text-white  focus:ring-4 focus:outline-none font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800">Submit</button>
  </form>
</div>