{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Register</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/flowbite@1.5.3/dist/datepicker.js"></script>
  <style>
      body{
          font-family: 'Prompt', sans-serif;
          
      }
  </style>
</head>
<body >
    
    {% block main %} {% endblock %}

    
    <!-- component -->
<div class="bg-white dark:bg-gray-900 mt-5">
    <div class="aler alert-danger " role="alert">
        {% for message in messages %}
        <b>{{message}}</b>
        {% endfor %}
    </div>
    <div class="flex justify-center h-screen">
        <div class="md:w-8/12 lg:w-6/12 mb-12 md:mb-0">
            <img
              src="{% static 'img/img_register.svg' %}"
              class="w-[70%] ml-[30%] mt-[7%]"
              alt="Phone image"
            />
          </div>
        
        
        <div class="flex items-center w-full mb-[3%] max-w-md px-5 mx-auto lg:w-2/6">
            <div class="flex-1">
                <div class="text-center">
                    <h2 class="text-2xl mt-2 font-bold text-center text-gray-700 dark:text-white">Register</h2>
                    
                    <p class="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
                </div>

                <div class="mt-8">
                    <form  class="space-y-4 md:space-y-6" action="/register" method="post">
                        {% csrf_token %}
                        {{ user.username }}

                        <div>
                            <label for="" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Username</label>
                            <input type="username" name="username" id="username" placeholder="username" class="block w-full px-1 py-1 mt-1 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                        </div>
                        
                        <div>
                            <label for="" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">First name</label>
                            <input type="text" name="first_name" id="first_name" placeholder="Firt name.." class="block w-full px-1 py-1 mt-1 text text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                        </div>
                        <div>
                            <label for="" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Last name</label>
                            <input type="text" name="last_name" id="last_name" placeholder="Last name..." class="block w-full px-1 py-1 mt-1 text text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                        </div>
                        <div>
                            <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email Address</label>
                            <input type="email" name="email" id="email" placeholder="@gmail.com" class="block w-full px-1 py-1 mt-1 text text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                        </div>

                        <div class="mt-6">
                            <div class="flex justify-between mb-1">
                                <label for="" class="text-sm text-gray-600 dark:text-gray-200">Password</label>
                            </div>
                        <div>
                            <input type="password" name="password1" id="password1" placeholder="Your Password" class="block w-full px-1 py-1 mt-1 text text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                        </div>

                        </div>
                        <div class="mt-4">
                            <div class="flex justify-between mb-1 ">
                                <label for="" class="text-sm text-gray-600 dark:text-gray-200">Conferm password</label>
                            </div>
                        </div>

                        <div>
                            <input type="password" name="password2" id="password2" placeholder="Conferm Password" class="block w-full px-1 py-1 mt-1  text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                        </div>

                        <a href="#" class="ml-[60%] text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
                        <div class="mt-6">
                            <button
                                class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
                                Sign in
                            </button>
                            
                        </div>
                        

                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
  



</body>
</html>