<%- include('partials/header') %> 
<%- include('partials/customcss') %>

<form class="form-signin" action="/addNewUrl" method="POST">
    <div class="text-center mb-4">
        <a href="/"> <img class="mb-4 rounded" src="diamond.svg" alt="" width="72" height="72"></a>
      <h1 class="h3 mb-3 font-weight-normal text-white">N5HL URL SHORTENER</h1>
      <p class="text-light">Shorten your links to a custom extension like : <a href="https://github.com/N05h3ll/n5hl">n5hl.cf/github</a><label class="text-danger"> Note the extension field is optional. If you didn't specify it the API will randomly generate 5 characters.</label></p>
    </div>
    <% if (complete) { %>
        <div class="alert alert-success" role="alert">
          Success ! Here is your short link : <a href="<%= complete %>">n5hl.cf/<%= complete %> </a>
        </div>
      <% } %> 
      <% if (typeof(error) != 'undefined') { %>
          <div class="alert alert-danger" role="alert">
            <%= error %> 
          </div>
        <% } %> 
    <div class="form-label-group">
      <input type="url" name="url"id="inputEmail" class="form-control" placeholder="URL" required autofocus>
      <label for="inputEmail">URL</label>
    </div>

    <div class="form-label-group">
      <input type="text" name="extension" id="inputPassword" class="form-control" placeholder="Extension">
      <label for="inputPassword">Extension</label>
    </div>

    <div class="checkbox mb-3">
     
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Shorten</button>
    <p class="mt-5 mb-3 text-muted text-center">&copy; <%= new Date().getFullYear();%></p>
  </form>
<%- include('partials/footer') %> 

