{% extends 'base.html' %}
{% block title %}登录{% endblock %}

{% block content %}
<div class="card auth-card shadow-lg">
  <div class="card-body p-5">
    <div class="text-center mb-4">
      <i class="bi bi-collection-play text-primary" style="font-size:3rem"></i>
      <h2 class="fw-bold mt-2">个人资料库</h2>
      <p class="text-muted">登录以管理您的资源</p>
    </div>

    <form method="POST" action="{{ url_for('auth.login') }}" novalidate>
      {{ form.hidden_tag() }}

      <div class="mb-3">
        <label class="form-label">{{ form.username.label.text }}</label>
        {{ form.username(class='form-control form-control-lg' +
           (' is-invalid' if form.username.errors else ''),
           placeholder='请输入用户名') }}
        {% for err in form.username.errors %}
          <div class="invalid-feedback">{{ err }}</div>
        {% endfor %}
      </div>

      <div class="mb-3">
        <label class="form-label">{{ form.password.label.text }}</label>
        <div class="input-group">
          {{ form.password(class='form-control form-control-lg' +
             (' is-invalid' if form.password.errors else ''),
             placeholder='请输入密码', id='loginPassword') }}
          <button class="btn btn-outline-secondary" type="button"
                  onclick="togglePwd('loginPassword', this)">
            <i class="bi bi-eye"></i>
          </button>
          {% for err in form.password.errors %}
            <div class="invalid-feedback">{{ err }}</div>
          {% endfor %}
        </div>
      </div>

      <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="form-check">
          {{ form.remember(class='form-check-input') }}
          <label class="form-check-label" for="remember">记住我</label>
        </div>
      </div>

      <button type="submit" class="btn btn-primary btn-lg w-100">
        <i class="bi bi-box-arrow-in-right me-1"></i>登录
      </button>
    </form>

    {% if allow_register %}
    <hr class="my-4">
    <p class="text-center text-muted mb-0">
      还没有账号？
      <a href="{{ url_for('auth.register') }}" class="text-decoration-none">立即注册</a>
    </p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function togglePwd(id, btn) {
  const input = document.getElementById(id);
  const icon = btn.querySelector('i');
  if (input.type === 'password') {
    input.type = 'text';
    icon.className = 'bi bi-eye-slash';
  } else {
    input.type = 'password';
    icon.className = 'bi bi-eye';
  }
}
</script>
{% endblock %}