<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录 - 图书管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-login-redesign">
</head>
<body class="auth-page">
<main class="auth-shell">
    <section class="login-panel" aria-labelledby="login-title">
        <div class="login-card-head">
            <div class="login-brand-row">
                <span class="login-brand-mark" aria-hidden="true">
                    <svg viewBox="0 0 48 48" focusable="false">
                        <path d="M8 11.5c0-2 1.6-3.5 3.5-3.5H22c1.5 0 2.8.6 3.8 1.6V39c-1-.8-2.3-1.2-3.8-1.2H11.5A3.5 3.5 0 0 1 8 34.3V11.5Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
                        <path d="M40 11.5c0-2-1.6-3.5-3.5-3.5H26c-1.5 0-2.8.6-3.8 1.6V39c1-.8 2.3-1.2 3.8-1.2h10.5a3.5 3.5 0 0 0 3.5-3.5V11.5Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
                        <path d="M14 15.5h7M14 22h7M27 15.5h7M27 22h7" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </span>
                <h1 id="login-title">图书管理系统</h1>
            </div>
            <p class="login-subtitle">欢迎登录图书管理平台</p>
        </div>

        <c:if test="${not empty errorMessage}">
            <div class="message message-error login-error" role="alert">
                <c:out value="${errorMessage}" />
            </div>
        </c:if>

        <form class="login-form" action="${pageContext.request.contextPath}/login" method="post" novalidate data-login-form>
            <input type="hidden" name="redirect" value="${fn:escapeXml(redirect)}">
            <div class="login-field">
                <label class="sr-only" for="username">用户名</label>
                <div class="login-input-shell">
                    <span class="login-input-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" focusable="false">
                            <path d="M20 21a8 8 0 0 0-16 0" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
                            <circle cx="12" cy="7.5" r="4" fill="none" stroke="currentColor" stroke-width="1.9"/>
                        </svg>
                    </span>
                    <input class="login-control"
                           id="username"
                           name="username"
                           type="text"
                           value="${fn:escapeXml(username)}"
                           autocomplete="username"
                           placeholder="用户名"
                           required>
                </div>
            </div>

            <div class="login-field">
                <label class="sr-only" for="password">密码</label>
                <div class="login-input-shell login-password-shell">
                    <span class="login-input-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" focusable="false">
                            <rect x="5" y="10" width="14" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.9"/>
                            <path d="M8 10V7.5a4 4 0 0 1 8 0V10M12 14.5v2" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <input class="login-control"
                           id="password"
                           name="password"
                           type="password"
                           autocomplete="current-password"
                           placeholder="密码"
                           required>
                    <button class="password-toggle"
                            type="button"
                            aria-label="显示密码"
                            aria-controls="password"
                            aria-pressed="false"
                            data-password-toggle>
                        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                            <path d="M2.8 12s3.3-5.5 9.2-5.5 9.2 5.5 9.2 5.5-3.3 5.5-9.2 5.5S2.8 12 2.8 12Z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/>
                            <circle cx="12" cy="12" r="2.8" fill="none" stroke="currentColor" stroke-width="1.9"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="login-role-group" role="radiogroup" aria-labelledby="login-role-label">
                <span class="login-role-title" id="login-role-label">登录身份</span>
                <div class="login-role-options">
                    <label>
                        <input type="radio" name="loginRole" value="administrator" checked>
                        <span>管理员</span>
                    </label>
                    <label>
                        <input type="radio" name="loginRole" value="librarian">
                        <span>馆员</span>
                    </label>
                    <label>
                        <input type="radio" name="loginRole" value="reader">
                        <span>读者</span>
                    </label>
                </div>
            </div>

            <div class="login-options-row">
                <label class="login-check">
                    <input type="checkbox" name="rememberUsername" value="true" data-remember-username>
                    <span>记住我</span>
                </label>
                <button class="forgot-password-link" type="button" data-forgot-password>
                    忘记密码?
                </button>
            </div>
            <p class="login-help-message" id="password-help" tabindex="-1" hidden>
                请联系系统管理员重置密码。
            </p>

            <button class="button button-primary login-submit" type="submit">登录</button>
        </form>
    </section>
</main>
<script src="${pageContext.request.contextPath}/static/js/login.js?v=20260428-login-redesign"></script>
</body>
</html>
