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

{% block title %} Injections {% 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="pb-8">
            {% if sent %}
                <div class="bg-transparent text-center py-4 lg:px-4 ">
                <div class="p-2 rounded-full bg-gradient-to-r from-green-600 to-blue-600">
                    <div class="p-4 bg-gray-700 rounded-lg items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
                         role="alert">
                        {% if data is not None %}
                            <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Success</span>
                            <span class="font-semibold mr-2 text-left flex-auto">
                                UserID: {{ data.0 }} <br><br>
                                User Name: {{ data.4 }} <br><br>
                                Password: {{ data.1 }}
                            </span>

                        {% else %}
                            <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Fail</span>
                            <span class="font-semibold mr-2 text-left flex-auto">
                                Failed attempt, try again.
                            </span>
                        {% endif %}
                    </div>
                </div>
                </div>
            {% endif %}
        </div>
        <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">
                    Injections
                </h1>
                <form method="post" class="flex flex-col items-center">
                    <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="">
                        <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-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" {% comment %}required=""{% endcomment %}>
                    </div>
                    <p style="color:#ffffff" class="pt-3 pb-3">
                        {{ msg }}
                    </p>

                    <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>
                </form>
            </div>
        </div>
    </div>
    </div>

    </div>


{% endblock %}