<%- include("../../includes/head.ejs") %>
<div class="w-[300px] sm:w-[500px] mx-auto">
  <%- include("../../components/form-errors.ejs") %>
  <form
    action="/signup"
    method="post"
    enctype="application/x-www-form-urlencoded"
  >
    <% if (locals.csrfToken) { %>
    <input type="hidden" name="_csrf" value="<%= locals.csrfToken %>" />
    <% } %>
    <div class="relative z-0 w-full mb-6 group">
      <input type="email" name="email" id="floating_email" class="block py-2.5
      px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2
      border-gray-300 appearance-none dark:text-white dark:border-gray-600
      dark:focus:border-green-500 focus:outline-none focus:ring-0
      focus:border-green-600 peer <%= locals.errorFields?.find((field) => field
      === "email") ? "border-red-500" : "" %>" value="<%= locals.values?.email
      %>" placeholder=" " required />
      <label
        for="floating_email"
        class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-green-600 peer-focus:dark:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
        >Email address</label
      >
    </div>
    <div class="relative z-0 w-full mb-6 group">
      <input type="password" name="password" id="floating_password" class="block
      py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0
      border-b-2 border-gray-300 appearance-none dark:text-white
      dark:border-gray-600 dark:focus:border-green-500 focus:outline-none
      focus:ring-0 focus:border-green-600 peer <%=
      locals.errorFields?.find((field) => field === "password") ?
      "border-red-500" : "" %>" placeholder=" " required />
      <label
        for="floating_password"
        class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-green-600 peer-focus:dark:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
        >Password</label
      >
    </div>
    <div class="relative z-0 w-full mb-6 group">
      <input type="password" name="repeatpassword" id="floating_repeat_password"
      class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent
      border-0 border-b-2 border-gray-300 appearance-none dark:text-white
      dark:border-gray-600 dark:focus:border-green-500 focus:outline-none
      focus:ring-0 focus:border-green-600 peer <%=
      locals.errorFields?.find((field) => field === "repeatpassword") ?
      "border-red-500" : "" %>" placeholder=" " required />
      <label
        for="floating_repeat_password"
        class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-green-600 peer-focus:dark:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
        >Confirm password</label
      >
    </div>
    <div class="grid md:grid-cols-2 md:gap-6">
      <div class="relative z-0 w-full mb-6 group">
        <input type="text" name="firstname" id="floating_first_name"
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent
        border-0 border-b-2 border-gray-300 appearance-none dark:text-white
        dark:border-gray-600 dark:focus:border-green-500 focus:outline-none
        focus:ring-0 focus:border-green-600 peer <%=
        locals.errorFields?.find((field) => field === "firstname") ?
        "border-red-500" : "" %>" value="<%= locals.values?.firstname %>"
        placeholder=" " required />
        <label
          for="floating_first_name"
          class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-green-600 peer-focus:dark:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
          >First name</label
        >
      </div>
      <div class="relative z-0 w-full mb-6 group">
        <input
          type="text"
          name="lastname"
          id="floating_last_name"
          class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-green-500 focus:outline-none focus:ring-0 focus:border-green-600 peer"
          placeholder=" "
          required
        />
        <label
          for="floating_last_name"
          class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-green-600 peer-focus:dark:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
          >Last name</label
        >
      </div>
    </div>
    <button
      type="submit"
      class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
    >
      Sign up
    </button>
  </form>
</div>
<%- include("../../includes/end.ejs") %>
