{% extends "base.html" %}
{% set title = "登录" %}
{% set page = "login" %}

{% block content %}
<div style="display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 200px); padding: 20px;">
  <div class="card" style="width: 100%; max-width: 440px; padding: 32px 24px; border-radius: 20px; box-shadow: var(--shadow-lg);">
    <div style="text-align: center; margin-bottom: 32px;">
      <div style="width: 64px; height: 64px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; color: white; box-shadow: var(--shadow);">
        <i class="ri-user-smile-fill" style="font-size: 2rem;"></i>
      </div>
      <h1 style="font-size: 1.75rem; margin-bottom: 8px;">欢迎回来</h1>
      <p class="muted" style="font-size: 1rem;">登录以继续访问 SourceShare</p>
    </div>
    
    <div class="form">
      <div style="margin-bottom: 20px;">
        <label class="label" style="display: flex; align-items: center; gap: 6px;"><i class="ri-smartphone-line"></i> 手机号</label>
        <input id="phone" class="input" type="tel" inputmode="numeric" autocomplete="tel" maxlength="20" placeholder="请输入手机号" />
      </div>
      <div style="margin-bottom: 32px;">
        <label class="label" style="display: flex; align-items: center; gap: 6px;"><i class="ri-lock-password-line"></i> 密码</label>
        <input id="password" class="input" type="password" autocomplete="current-password" placeholder="请输入密码" />
      </div>
      
      <div style="display: flex; flex-direction: column; gap: 16px;">
        <button id="loginBtn" class="btn btn-primary" style="height: 48px; font-size: 1.1rem; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;">
          <i class="ri-login-box-line"></i> 登录
        </button>
        <div style="text-align: center; margin-top: 8px;">
          <span class="muted">还没有账号？</span>
          <a id="toRegister" href="{{ url_for('page_register') }}" style="color: var(--brand); font-weight: 500; text-decoration: none;">立即注册</a>
        </div>
      </div>
      <div id="msg" class="form-msg" style="display:none; margin-top: 16px; text-align: center; border-radius: 8px; padding: 12px;"></div>
    </div>
  </div>
</div>
{% endblock %}