<%- include('partials/headerNoLogin') -%>
<% 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>
    <% }) %> 
  <% } %> 

  <div class="absolute h-full w-full bg-slate-400">
    <div class="absolute inset-0 bg-slate-100 bg-[size:20px_20px] opacity-20 blur-[100px]"></div>
  </div>

  <div class="relative p-4 sm:ml-64">
    <div class="flex justify-center p-4 mt-14">      
        <div class="w-full max-w-sm animate-fadeinup p-4 bg-slate-700 border-2 border-slate-300 rounded-lg shadow">
          <div class="p-2 mb-4">
            <h5 class="text-5xl font-light text-slate-200">Signup</h5>
          </div>
          <form class="space-y-6" action="/signup" enctype="multipart/form-data" method="POST">
            <div>
              <label for="email" class="block mb-2 text-sm font-normal text-slate-200">Your email</label>
              <input type="email" name="email" id="email" class="bg-slate-800 text-slate-200 border-slate-600 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" required>
            </div>
            <div>
                <label for="userName" class="block mb-2 text-sm font-normal text-slate-200">Username</label>
                <input type="text" name="userName" id="userName" class="bg-slate-800 text-slate-200 border-slate-600 text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" required>
              </div>
            <div>
              <label for="password" class="block mb-2 text-sm font-normal text-slate-200">Your password</label>
              <input type="password" name="password" id="password" placeholder="••••••••" class="bg-slate-800 text-slate-200 border-slate-600 sm:text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" required>
            </div>
            <div>
                <label for="confirmPassword" class="block mb-2 text-sm font-normal text-slate-200">Confirm password</label>
                <input type="password" name="confirmPassword" id="confirmPassword" placeholder="••••••••" class="bg-slate-800 text-slate-200 border-slate-600 sm:text-sm rounded-lg focus:ring-slate-300 focus:border-slate-300 block w-full p-2.5" required>
            </div>
            <div>
                <label class="block mb-2 text-sm font-normal text-slate-200" for="user_avatar">Add photo</label>
                <input class="block w-full text-sm text-slate-200 border-slate-600 border-2 rounded-lg cursor-pointer bg-slate-800 focus:ring-slate-300" aria-describedby="user_avatar_help" id="file" name="file" type="file">
                <div class="mt-1 ml-2 text-sm text-slate-400" id="brew_image_help">2mb max. png or jpg</div>
            </div>
            <button type="submit" class="group relative inline-flex place-self-end h-10 items-center justify-center overflow-hidden rounded-md bg-slate-500 px-6 font-medium text-slate-200">
              <div class="mr-0 w-0 -translate-x-[100%] opacity-0 transition-all duration-200 group-hover:mr-1 group-hover:w-5 group-hover:translate-x-0 group-hover:opacity-100">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
                  <path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
                </svg>
              </div>
              <span class="font-normal">Signup</span>
            </button>
          </form>
          <div class="text-sm mt-4 font-normal text-slate-400">
            Already signed up? 
            <a href="/login">
              <button role="link" class="relative font-thin after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 text-slate-300 text-sm after:bg-slate-400 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100">Login</button>
            </a>
          </div>
        </div>
    </div>
  </div>
<%- include('partials/footer') -%>