{% 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 border border-gray-200 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">
                    Log In
                </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-gray-50 border border-gray-300 text-gray-900 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="name@company.com" required="">
                    </div>
                    <div class="">
                        <label for="password"
                               class="block mb-2 text-sm font-medium text-gray-900 text-white">Password</label>
                        <input type="password" name="password" id="password" placeholder="••••••••"
                               class="bg-gray-50 border border-gray-300 text-gray-900 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" {% comment %}required=""{% endcomment %}>
                    </div>
                    <p style="color:#ff0000" class="pt-3 pb-3">
                        {{ msg }}
                    </p>
                    <div class="p-1 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400">
                        <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>
                </form>
            </div>
        </div>
    </div>
    </div>

    </div>


{% endblock %}