<%- include('partials/header') -%>
<!--BODY-->
<section class="text-gray-900 bg-ante-400 h-full md:h-screen">
  <!--CONTAINER-->
  <div class="px-4 py-20 mx-auto max-w-7xl">
    <!--LOGO-->
    <a
      href="/"
      title="ante"
      class="flex items-center justify-start sm:justify-center"
    >
      <svg
        width="100px"
        height="100px"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 100 100"
        style="enable-background: new 0 0 100 100"
        xml:space="preserve"
      >
        <rect class="fill-ante-400" width="100" height="100" />
        <g
          id="_x34_60d4a30-f308-49bf-8c55-4f3cec65b799"
          transform="matrix(7.7662434577941895,0,0,7.7662434577941895,42.63168625237236,156.6312970095252)"
        >
          <path
            class="fill-ante-300"
            d="M-1.6-11.3L-1.7-11c-0.2-0.2-0.4-0.4-0.8-0.4c-0.6,0-1,0.4-1,1.2C-3.5-9.4-3-9-2.5-9c0.3,0,0.6-0.1,0.8-0.4
       l0.1,0.3h0.4v-2.2H-1.6z M-2.3-9.4C-2.7-9.4-3-9.7-3-10.2c0-0.4,0.3-0.8,0.7-0.8c0.4,0,0.7,0.3,0.7,0.8C-1.7-9.7-1.9-9.4-2.3-9.4z
        M0.5-11.3c-0.3,0-0.5,0.1-0.7,0.3l-0.1-0.3h-0.4v2.2h0.5v-1.3c0-0.4,0.3-0.5,0.5-0.5c0.3,0,0.5,0.2,0.5,0.6v1.3h0.5v-1.4
       C1.3-11.1,0.9-11.3,0.5-11.3z M2.9-11.3H2.5v-0.6H2v0.6H1.7v0.4H2v1.8h0.5l0-1.8h0.5V-11.3z M5.4-10.2c0-0.7-0.4-1.1-1.1-1.1
       c-0.7,0-1.1,0.5-1.1,1.2C3.2-9.5,3.6-9,4.4-9c0.4,0,0.7-0.1,0.9-0.4L4.9-9.6C4.8-9.5,4.6-9.4,4.4-9.4c-0.4,0-0.7-0.3-0.7-0.7h1.7
       V-10.2z M4.3-10.9c0.3,0,0.6,0.2,0.6,0.6H3.7C3.8-10.7,4-10.9,4.3-10.9z"
          />
        </g>
        <g
          id="b968ada9-2b1a-4a33-845b-f84b44a5e6f8"
          transform="matrix(1.9891679286956787,0,0,1.9891679286956787,50.54143322540237,7.974394646396142)"
        >
          <g>
            <path
              class="fill-ante-300"
              d="M-0.8,14.7c0.4-1,1.1-2.3,2.1-3.3h-11c-2.9,0-4,3.1-4.7,4.8c-0.1,0.2-0.2,0.4-0.2,0.6
         c-0.6,1.5-1.4,5.5-1.5,5.9c-0.2,0.9,0.4,1.8,1.3,1.9c0.1,0,0.2,0,0.3,0c0.8,0,1.5-0.5,1.6-1.3c0.3-1.6,0.9-4.4,1.3-5.3
         c0.1-0.2,0.2-0.4,0.3-0.7l0.1,6.3c0,0.8,0.7,1.5,1.6,1.5h4.2c0.8,0,1.5-0.7,1.6-1.5l0.2-9C-3.6,14.7-0.8,14.7-0.8,14.7z"
            />
            <circle class="fill-ante-300" cx="-7.5" cy="6.6" r="3.9" />
            <path
              class="fill-ante-300"
              d="M15.5,22.7c-0.1-0.4-0.9-4.4-1.5-5.9c-0.1-0.2-0.1-0.4-0.2-0.6c-0.6-1.7-1.8-4.8-4.7-4.8H4.7
         c-2.9,0-4,3.1-4.7,4.8c-0.1,0.2-0.2,0.4-0.2,0.6c-0.6,1.5-1.4,5.4-1.5,5.9c-0.2,0.9,0.4,1.8,1.3,1.9c0.9,0.2,1.8-0.4,1.9-1.3
         c0.3-1.6,0.9-4.4,1.3-5.3c0.1-0.2,0.2-0.4,0.3-0.7l0.1,6.3c0,0.8,0.7,1.5,1.6,1.5H9c0.8,0,1.5-0.7,1.6-1.5l0.1-6.3
         c0.1,0.3,0.2,0.5,0.3,0.7c0.4,0.9,1,3.7,1.3,5.3c0.2,0.8,0.8,1.3,1.6,1.3c0.1,0,0.2,0,0.3,0C15.1,24.5,15.7,23.6,15.5,22.7
         L15.5,22.7z"
            />
            <circle class="fill-ante-300" cx="6.9" cy="6.6" r="3.9" />
          </g>
        </g>
      </svg>
      <span class="sr-only">ante</span>
    </a>
    <!--/LOGO-->

    <!--CONTENT-->
    <div
      class="w-full px-0 pt-5 pb-6 mx-auto mt-4 mb-0 space-y-4 sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-4/12 md:px-6 sm:mt-8 sm:mb-5 bg-transparent border-0 border-gray-200 rounded-lg md:bg-ante-500 md:bg-opacity-50"
    >
      <h1 class="mb-5 text-xl font-light text-left sm:text-center">Sign In</h1>
      <!--ERROR MSG DISPLAY-->
      <% if (locals.messages.errors) { %> <% messages.errors.forEach( el => { %>
      <div class="alert alert-danger"><%= el.msg %></div>
      <% }) %> <% } %> <% if (locals.messages.info) { %> <%
      messages.info.forEach( el => { %>
      <div class="alert alert-info"><%= el.msg %></div>
      <% }) %> <% } %>

      <!--FORM-->
      <form action="/login" method="POST" class="pb-1 space-y-4">

        <label for="email" class="block">
          <span class="block mb-1 text-xs font-medium text-gray-800"
            >Email:</span
          >
          <input
            class="w-full bg-gray-300 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-violet-900 rounded border border-gray-600 focus:border-violet-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            type="email"
            inputmode="email"
            id="email"
            aria-describedby="emailHelp"
            name="email"
            required
          />
        </label>
        
        <label for="password" class="block">
          <span class="block mb-1 text-xs font-medium text-gray-800"
            >Password:</span
          >
          <input
            class="w-full bg-gray-300 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-violet-900 rounded border border-gray-600 focus:border-violet-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            type="password"
            id="password"
            name="password"
            required
          />
        </label>

        <div class="flex items-center justify-between">
          <label class="flex items-center">
            <input 
            type="checkbox" 
            class="form-checkbox"
            id="rememberMe"
            value="lsRememberMe"            
            />
            <span
              class="block ml-2 text-xs font-medium text-gray-800 cursor-pointer"
              >Remember Me</span
            >
          </label>

          <input
            type="submit"
            class="text-white bg-violet-600 border-0 py-2 px-6 focus:outline-none hover:bg-violet-500 rounded text-lg"
            value="Login"
          />
        </div>
      </form>
      <!--/FORM-->
    </div>
    <p
      class="mb-4 space-y-2 text-sm text-left text-gray-600 sm:text-center sm:space-y-0"
    >
      <a href="/signup" class="w-full btn btn-sm btn-link sm:w-auto"
        >Create an account</a
      >
    </p>
    <!--CONTENT-->
  </div>
  <!--/CONTAINER-->
</section>
<!--/BODY-->
<%- include('partials/footer') -%>
