{% extends 'core/base.html' %}
{% load static %}

{% block title %} Sign Up {% endblock %}

{% block content %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
        <div class="shadow dark:border md:mt-0 sm:max-w-md xl:p-0 bg-white rounded-lg shadow bg-opacity-10 backdrop-filter backdrop-blur-md">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8 flex flex-col items-center">
                <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl text-white">
                    Create an account
                </h1>
                <form method="post" class="flex flex-col items-center">
                    {% csrf_token %}
                    <div class="pb-3">
                      <label for="username" class="block mb-2 text-sm font-medium text-gray-900 text-white">Your User Name</label>
                      <input type="text" name="username" id="username" class="bg-white bg-opacity-0 border border-gray-300 placeholder-white text-white sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="username" required="">
                  </div>
                  <div class="pb-3">
                      <label for="password" class="block mb-2 text-sm font-medium text-gray-900 text-white">Password</label>
                      <input type="password" name="password1" id="password1" placeholder="••••••••" class="bg-white bg-opacity-0 border border-gray-300 placeholder-white text-white sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
                  </div>
                  <div class="pb-3">
                      <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 text-white">Confirm password</label>
                      <input type="password" name="password2" id="password2" placeholder="••••••••" class="bg-white bg-opacity-0 border border-gray-300 placeholder-white text-white sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
                  </div>
                        <p>
                            {% for field in form %}
                                    {% for error in field.errors %}
                                        <p style="color: #ffffff">{{ error }}</p>
                                    {% endfor %}
                            {% endfor %}
                        </p>
                    <div class="pt-3">
                        <div class="p-1 rounded-full bg-gradient-to-r from-green-600 to-blue-600">
                            <button type="submit"
                                    class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                                Sign Up
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}