{% extends 'base.html' %}
{% load static %}
{% block title %}Login{% endblock %}
{% block content %}
    <div class="flex justify-center items-center my-16" id="myTabContent">
        <div class="shadow-md p-4 rounded-lg bg-gray-100" id="profile" role="tabpanel" aria-labelledby="profile-tab ">
            
            <h3 class="mt-3 text-xl font-medium text-center text-gray-600">Welcome Back</h3>

            {% if form.errors %}
            <div class="text-sm bg-red-100 text-red-700 p-4 mb-4 rounded">
                <strong>Error:</strong> Invalid username or password.
            </div>
            {% endif %}

            <form method="POST" action="{% url 'login' %}" class="tab-content md:w-[400px]">
                {% csrf_token %}
                <div class="w-full mt-4">
                    <label class="block mb-2 text-sm font-medium text-gray-600" for="LoggingEmailAddress">Username</label>
                    <input class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md focus:border-green-400 focus:ring-green-300 focus:ring-opacity-40 focus:outline-none focus:ring" name="username" type="text" placeholder="Enter your username..." aria-label="Username" />
                </div>

                <div class="w-full mt-4">
                    <label class="block mb-2 text-sm font-medium text-gray-600" for="LoggingEmailAddress">Password</label>
                    <input class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md focus:border-green-400 focus:ring-green-300 focus:ring-opacity-40 focus:outline-none focus:ring" name="password" type="password" placeholder="********" aria-label="Password" />
                </div>

                <div class="mt-6">
                    <input value="Login" type="submit" class="w-full inline-flex items-center justify-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none ring-2 ring-offset-2 ring-transparent ring-offset-transparent disabled:bg-gray-400 appearance-none text-white bg-lime-600 hover:bg-lime-700 focus:ring-lime-500 focus:ring-offset-white !px-12 !shadow-lg !rounded-full !text-base"/>
                </div>
            </form>
        </div>
    </div>  
{% endblock %}