{% extends "admin/base.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    * {
        box-sizing: border-box;
    }
    
    body.login {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login #container {
        background: none;
        border: none;
        width: 100%;
        max-width: 420px;
        margin: 0;
        padding: 20px;
    }
    
    .login #content {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        padding: 50px 40px;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .login-header {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .company-logo {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 2rem;
        color: white;
        font-weight: 600;
    }
    
    .login h1 {
        color: #1a202c;
        font-size: 1.875rem;
        font-weight: 700;
        margin: 0 0 8px 0;
        letter-spacing: -0.025em;
    }
    
    .login h1:before {
        display: none;
    }
    
    .login-subtitle {
        color: #64748b;
        font-size: 1rem;
        margin: 0;
        font-weight: 400;
    }
    
    .login form {
        margin-top: 0;
    }
    
    .form-group {
        margin-bottom: 24px;
    }
    
    .login label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-weight: 500;
        font-size: 0.875rem;
        letter-spacing: 0.025em;
    }
    
    .login input[type="text"], 
    .login input[type="password"] {
        width: 100%;
        padding: 16px 20px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 1rem;
        font-family: inherit;
        background: #ffffff;
        transition: all 0.2s ease;
        color: #1f2937;
    }
    
    .login input[type="text"]:focus, 
    .login input[type="password"]:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }
    
    .login input[type="text"]:hover, 
    .login input[type="password"]:hover {
        border-color: #d1d5db;
    }
    
    .submit-row {
        margin-top: 32px;
    }
    
    .login input[type="submit"] {
        width: 100%;
        padding: 16px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        letter-spacing: 0.025em;
        text-transform: uppercase;
        font-family: inherit;
    }
    
    .login input[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    }
    
    .login input[type="submit"]:active {
        transform: translateY(0);
    }
    
    .error-message {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #dc2626;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 24px;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
    }
    
    .error-message:before {
        content: "⚠️";
        margin-right: 8px;
    }
    
    .login-footer {
        text-align: center;
        margin-top: 40px;
        padding-top: 24px;
        border-top: 1px solid #e5e7eb;
    }
    
    .login-footer p {
        color: #6b7280;
        font-size: 0.875rem;
        margin: 0;
    }
    
    .security-badge {
        display: inline-flex;
        align-items: center;
        background: #f0fdf4;
        color: #166534;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-top: 16px;
        border: 1px solid #bbf7d0;
    }
    
    .security-badge:before {
        content: "🔒";
        margin-right: 6px;
    }
    
    .login #header, 
    .login #footer, 
    .login .breadcrumbs {
        display: none;
    }
    
    /* Responsive Design */
    @media (max-width: 480px) {
        .login #container {
            padding: 10px;
        }
        
        .login #content {
            padding: 30px 20px;
        }
        
        .login h1 {
            font-size: 1.5rem;
        }
        
        .company-logo {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }
    }
    
    /* Loading Animation */
    .login input[type="submit"]:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    
    .login input[type="submit"]:disabled:after {
        content: "";
        width: 16px;
        height: 16px;
        margin-left: 10px;
        border: 2px solid transparent;
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spin 1s ease infinite;
        display: inline-block;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}
{% block nav-global %}{% endblock %}
{% block content_title %}{% endblock %}
{% block breadcrumbs %}{% endblock %}

{% block content %}
<div class="login">
    <div class="login-header">
        <div class="company-logo">TJ</div>
        <h1>Welcome Back</h1>
        <p class="login-subtitle">Sign in to TEAMJOINT Admin Portal</p>
    </div>
    
    {% if form.errors or form.non_field_errors %}
    <div class="error-message">
        {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        {% else %}
            Please check your credentials and try again.
        {% endif %}
    </div>
    {% endif %}
    
    <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
        <div class="form-group">
            {{ form.username.label_tag }}
            {{ form.username }}
        </div>
        
        <div class="form-group">
            {{ form.password.label_tag }}
            {{ form.password }}
        </div>
        
        <div class="submit-row">
            <input type="submit" value="Sign In" id="login-btn">
            <input type="hidden" name="next" value="{{ next }}">
        </div>
    </form>
    
    <div class="login-footer">
        <div class="security-badge">Secure Admin Access</div>
        <p>&copy; 2024 TEAMJOINT Company Limited. All rights reserved.</p>
    </div>
</div>

<script>
// Add loading state to login button
document.getElementById('login-form').addEventListener('submit', function() {
    const btn = document.getElementById('login-btn');
    btn.disabled = true;
    btn.value = 'Signing In...';
});

// Add enter key support
document.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        document.getElementById('login-form').submit();
    }
});
</script>
{% endblock %}