<!DOCTYPE html>
<html>
<head>
	<title>GAP</title>

	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" integrity="sha512-8Tb+T7SKUFQWOPIQCaLDWWe1K/SY8hvHl7brOH8Nz5z1VT8fnf8B+9neoUzmFY3OzkWMMs3OjrwZALgB1oXFBg==" crossorigin="anonymous" />

	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js"></script>

  <!-- Custom styling -->
	<style type="text/css">
  		.typewriter h1 {
        color: #fff;
        font-family: monospace;
        overflow: hidden; /* Ensures the content is not revealed until the animation */
        border-right: .15em solid orange; /* The typwriter cursor */
        white-space: nowrap; /* Keeps the content on a single line */
        margin: 0 auto; /* Gives that scrolling effect as the typing happens */
        letter-spacing: .1em; /* Adjust as needed */
        animation: 
        typing 3.5s steps(30, end),
        blink-caret .5s step-end infinite;
      }

      /* The typing effect */
      @keyframes typing {
        from { width: 0 }
        to { width: 100% }
      }

      /* The typewriter cursor effect */
      @keyframes blink-caret {
        from, to { border-color: transparent }
        50% { border-color: orange }
      }

      form h4 {
        font-size: 1.5rem;
        text-align: center;
        padding-bottom: 1rem;
        font-family: monospace;
      }

      h3{
        font-size: 1.5rem;
        font-family: monospace;
        padding-left: inherit;
      }

      .field{
        padding-bottom: 1rem;
      }

      form{
        top: 32%;
        padding-left: 2rem;
      }
</style>
</head>
<body>
	<div class="ui two column grid" style="min-height: 100%;">
   <div class="column ui aligned grid teal">
     <div class="column" style="top:35%;padding-left: 13%;">
      <div class=typewriter>
       <h1 style="font-size: 2.5rem;">Guide Allocation Portal</h1>
     </div>
     <h3>CSE Department, IIT Bombay</h3>
   </div>
 </div>
 <div class="column">
  <form class="ui large form" method="POST">
    {% csrf_token %}
    <h4 >Login now</h4>
    <div class="ui">
      <div class="field">
        <div class="ui left icon input">
          <i class="user icon"></i>
          <input type="text" name="username" placeholder="CSE username">
        </div>
      </div>
      <div class="field">
        <div class="ui left icon input">
          <i class="lock icon"></i>
          <input type="password" name="password" placeholder="Password">
        </div>
      </div>
      <button class="ui fluid large black submit button" type="submit">Login</button>
    </div>
  </form>
</div>
</div>

<!-- Scripts -->
{% if messages %}
  {% for message in messages %}
  <script>
    $('body')
    .toast({
      class: "red",
      title: "Error logging in",
      displayTime: 3000,
      closeIcon: true,
      position: "top center",
      showIcon: "exclamation",
      message: "{{ message }}",
      className: {
              toast: 'ui icon message'
      }
    });
  </script>
  {% endfor %}
{% endif %}

</body>
</html>