<!doctype html>
<html
    xmlns:th="https://www.thymeleaf.org"
    th:replace="~{gateway_fragments/layout :: layout(title = |登录 - ${site.title}|, head = ~{::head}, body = ~{::body})}"
>
    <head>
        <script th:src="@{/assets/js/login.js}" defer></script>
    </head>

    <th:block th:fragment="body">
        <div class="gateway-view-panel active" id="view-login">
            <div class="form-header">
                <h2>登录</h2>
                <p>继续你的文学之旅</p>
            </div>

            <div th:replace="~{gateway_fragments/login::form}"></div>

            <th:block th:if="${!#lists.isEmpty(formAuthProviders) or !#lists.isEmpty(socialAuthProviders)}">
                <div class="social-divider">
                    <div class="divider-line"></div>
                    <div class="divider-text"><span>快速关联</span></div>
                </div>
                <div class="social-buttons">
                    <a th:each="provider : ${formAuthProviders}"
                       th:href="'/login?method=' + ${provider.metadata.name}"
                       class="social-btn form-provider-btn">
                        <img th:src="${provider.metadata.name == 'passkey' ? '/plugins/auth-passkey/assets/static/passkey.svg' : provider.spec.logo}"
                             th:alt="${provider.spec.displayName}"
                             class="social-btn-icon" />
                        <span th:text="${#messages.msgOrNull('formAuthProviders.' + provider.metadata.name + '.displayName') ?: provider.spec.displayName}">Provider</span>
                    </a>
                    <form th:each="provider : ${socialAuthProviders}"
                          th:action="|/login/social/${provider.metadata.name}?remember-me=false|"
                          method="post" class="social-btn-form">
                        <button type="submit" class="social-btn">
                            <img th:src="${provider.spec.logo}" th:alt="${provider.spec.displayName}" class="social-btn-icon" />
                            <span th:text="${provider.spec.displayName}">Provider</span>
                        </button>
                    </form>
                </div>
            </th:block>

            <div class="gateway-switch">
                <th:block th:if="${globalInfo.allowRegistration}">
                    尚未开启旅程？ <a th:href="@{/signup}">立即注册</a>
                </th:block>
            </div>
        </div>

        <div class="gateway-view-panel" id="view-forgot">
            <button type="button" class="back-to-login" onclick="switchView('login')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
                <span>返回登录</span>
            </button>

            <div class="form-header">
                <h2>找回密码</h2>
                <p>我们将向您的邮箱发送重置链接</p>
            </div>

            <form class="halo-form" id="reset-form">
                <input type="hidden" name="_csrf" id="reset-csrf" value="" />
                <div class="form-item">
                    <label for="reset-email">注册邮箱</label>
                    <div class="form-input">
                        <input type="email" id="reset-email" name="email" required autocomplete="email" placeholder="your@email.com" />
                    </div>
                </div>
                <div class="form-item">
                    <button type="submit">发送重置邮件</button>
                </div>
            </form>

            <div class="forgot-tip">
                <p>提示：如果您在 5 分钟内未收到邮件，请检查垃圾邮箱或稍后重试。</p>
            </div>
        </div>
    </th:block>
</html>
