{% extends "admin/base_site.html" %}
{% load i18n admin_static %}

{% block extrastyle %}{{ block.super }}
<style>
    body {
        background: url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
    }
    #container {
        background: transparent;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #content {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        width: 100%;
        max-width: 400px;
        padding: 40px;
        backdrop-filter: blur(8px);
        margin: 0;
    }
    .login #header, .login .breadcrumbs, .login #footer { display: none; }
    #content-title { display: none; }
    .login .form-row { border: none; padding: 12px 0; }
    .login label { display: block; margin-bottom: 8px; color: #444; font-weight: 600; font-size: 14px; }
    .login input[type=text], .login input[type=password] {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-sizing: border-box;
        font-size: 14px;
        transition: border-color 0.3s;
    }
    .login input[type=text]:focus, .login input[type=password]:focus {
        border-color: #007bff;
        outline: none;
    }
    .submit-row { margin-top: 24px; text-align: center; }
    .submit-row input {
        background: #007bff;
        color: white;
        padding: 12px 0;
        width: 100%;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        transition: background 0.3s, transform 0.2s;
    }
    .submit-row input:hover { 
        background: #0056b3;
        transform: translateY(-1px);
    }
    .submit-row input:active {
        transform: translateY(0);
    }
    .default-account {
        margin-top: 30px;
        padding: 15px;
        background: #f0f7ff;
        border-left: 4px solid #007bff;
        border-radius: 4px;
        font-size: 13px;
        color: #555;
        line-height: 1.6;
    }
    .brand-logo {
        text-align: center;
        margin-bottom: 30px;
    }
    .brand-logo h1 {
        font-size: 28px;
        color: #333;
        margin: 0;
        letter-spacing: 1px;
    }
    .errornote {
        background: #fff5f5;
        color: #e53e3e;
        padding: 10px;
        border-radius: 4px;
        font-size: 13px;
        margin-bottom: 20px;
        border: 1px solid #feb2b2;
    }
</style>
{% endblock %}

{% block content %}
<div id="content-main">
    <div class="brand-logo">
        <h1>智捷ERP</h1>
        <p style="color: #666; margin-top: 5px;">高效管理 · 企业互联</p>
    </div>
    
    {% if form.errors and not form.non_field_errors %}
    <p class="errornote">
    {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
    </p>
    {% endif %}

    {% if form.non_field_errors %}
    {% for error in form.non_field_errors %}
    <p class="errornote">
        {{ error }}
    </p>
    {% endfor %}
    {% endif %}

    <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
      <div class="form-row">
        {{ form.username.label_tag }} {{ form.username }}
      </div>
      <div class="form-row">
        {{ form.password.label_tag }} {{ form.password }}
        <input type="hidden" name="next" value="{{ next }}" />
      </div>
      <div class="submit-row">
        <input type="submit" value="{% trans 'Log in' %}" />
      </div>
    </form>

    <div class="default-account">
        <strong style="color: #007bff;">演示账号</strong><br>
        用户名：admin<br>
        密&nbsp;&nbsp;&nbsp;码：admin
    </div>
</div>
{% endblock %}