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

{% block title %}{% if form.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/login.css" %}">
{{ form.media }}
{% endblock %}

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

{% block usertools %}{% endblock %}

{% block nav-global %}{% endblock %}

{% block nav-sidebar %}{% endblock %}

{% block content_title %}{% endblock %}

{% block nav-breadcrumbs %}{% endblock %}

{% block body_main %}

{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
</p>
{% endif %}

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

<div id="content-main">

{% if user.is_authenticated %}
<p class="errornote">
{% blocktranslate trimmed %}
    You are authenticated as {{ username }}, but are not authorized to
    access this page. Would you like to login to a different account?
{% endblocktranslate %}
</p>
{% endif %}

<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <div class="form-row">
    {{ form.username.errors }}
    {{ form.username.label_tag }} {{ form.username }}
  </div>
  <div class="form-row">
    {{ form.password.errors }}
    {{ form.password.label_tag }} {{ form.password }}
    <input type="hidden" name="next" value="{{ next }}">
  </div>
  {% url 'admin_password_reset' as password_reset_url %}
  {% if password_reset_url %}
  <div class="password-reset-link">
    <a href="{{ password_reset_url }}">{% translate 'Forgotten your login credentials?' %}</a>
  </div>
  {% endif %}
  <div class="submit-row">
    <input type="submit" value="{% translate 'Log in' %}">
  </div>
</form>

</div>
<style>
  
  #particles-js {
    position: absolute;
    top: 0px;
    width: 100%;
    height:95%;
}
#container{background-color: #ffffff17 !important;

    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    translate: -50% -80%;
}
#header,.submit-row input{
  background-color: #ffffff70!important;
}
#site-name a{
  color: #fff !important;
  font-weight: bold;
  text-shadow: #000 1px 1px 1px;
}
.theme-toggle { display:none !important;}
</style>
<script>
// 创建粒子效果插入逻辑
function addParticles() {
  const html = `<div id="particles-js" style="z-index:-99">
                  <canvas class="particles-js-canvas-el" style="width:100%;height:100%"></canvas>
                </div>`;
  
  const container = document.getElementById('container');
  if (container) {
    // 推荐方式
    container.insertAdjacentHTML('beforebegin', html);
    
    // 或使用传统方式
    // const range = document.createRange();
    // const fragment = range.createContextualFragment(html);
    // container.parentNode.insertBefore(fragment, container);
  }
}

// DOM 加载后执行
addParticles()

</script>

<style>
  body{
      background-image: linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad) !important;
          background-size: 400% !important;
          animation: bganimation 30s infinite;
    }
    @keyframes bganimation {
      0%{
          background-position: 0% 50%;
      }
      50%{
          background-position: 100% 50%;
      }
      100%{
          background-position: 0% 50%;
      }
  } 
</style>
<script type="text/javascript" src="{% static "shared/js/particles.js" %}"></script>
{% endblock %}
