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

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static "admin/css/login.css" %}">
<style>
.ucc-sso-panel {
  border: 1px solid var(--hairline-color);
  border-radius: 6px;
  padding: 16px;
  margin: 0 0 18px;
  background: var(--darkened-bg);
}
.ucc-sso-panel p {
  margin: 0 0 10px;
}
.ucc-sso-panel .button {
  display: inline-block;
  margin: 2px 0 8px;
}
.ucc-local-note {
  color: var(--body-quiet-color);
  font-size: 0.9rem;
}
/* AIOS_ADMIN_LOGIN_RESPONSIVE_LAYOUT_OK */
.login #container {
  width: min(100% - 32px, 420px);
  min-width: 0;
  box-sizing: border-box;
}
.login #content,
.login #content-main,
.ucc-sso-panel,
#login-form,
#login-form .form-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ucc-sso-panel {
  overflow-wrap: anywhere;
}
.ucc-sso-panel .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
}
#login-form input[type="text"],
#login-form input[type="password"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .login #container {
    width: calc(100% - 24px);
    margin: 32px auto;
  }
  .login #header {
    padding: 14px 16px;
  }
  .login #content {
    padding: 20px 16px;
  }
  .ucc-sso-panel {
    padding: 14px;
  }
}
</style>
{% endblock %}

{% block responsive %}
{{ block.super }}
<style>
/* AIOS_ADMIN_LOGIN_AFTER_RESPONSIVE_LAYOUT_OK */
html,
body.login {
  max-width: 100%;
  overflow-x: hidden;
}
body.login {
  box-sizing: border-box;
}
.login #container {
  width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  min-width: 0;
  margin: 50px auto;
  box-sizing: border-box;
}
.login #header,
.login #content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.login #header {
  padding: 14px 16px;
}
.login #branding {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  max-width: 100%;
}
.login #site-name {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}
.login .theme-toggle {
  flex: 0 0 auto;
}
.login #content,
.login #content-main,
.ucc-sso-panel,
#login-form,
#login-form .form-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.login #content {
  padding: 20px 16px;
}
#login-form label {
  display: block;
}
#login-form input[type="text"],
#login-form input[type="password"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.login .submit-row input {
  width: auto;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
}
@media (max-width: 480px) {
  body.login {
    padding: 0;
  }
  .login #container {
    width: min(420px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    margin: 32px auto;
  }
  .login #content {
    padding: 20px 14px;
  }
  .ucc-sso-panel {
    padding: 14px;
  }
}
</style>
{% endblock %}

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

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

{% block content %}
{% 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">
  <div class="ucc-sso-panel">
    <p><strong>ImRuYi 使用统一身份登录。</strong></p>
    <p>ImRuYi 是 Casdoor SSO 账号，请从统一身份入口进入后台；不要在下面的本地密码表单里输入 ImRuYi。</p>
    <p><a class="button" href="/casdoor/login/">使用 ImRuYi 登录后台</a></p>
    <p class="ucc-local-note">下面的本地表单仅用于 owner 应急账号。</p>
  </div>

  {% 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 password or username?' %}</a>
    </div>
    {% endif %}
    <div class="submit-row">
      <input type="submit" value="{% translate 'Log in' %}">
    </div>
  </form>
</div>
{% endblock %}