<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登入 - EwoooC</title>
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/logo_circle.svg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-tokens.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/page-login.css') }}">
</head>
<body class="login-body" data-page-group="system">
    <main class="login-page">
        <section class="login-brand" aria-label="EwoooC 登入品牌區">
            <div>
                <a class="brand-mark" href="/login">
                    <span class="brand-mark__icon">
                        <img src="{{ url_for('static', filename='images/logo_circle.svg') }}" alt="" width="36" height="36">
                    </span>
                    <span>EwoooC</span>
                </a>
                <h1>營運數據工作台</h1>
                <p>登入後先看 PChome 業績、價差、缺貨與 AI 建議。</p>
                <div class="login-meta" aria-label="服務狀態">
                    <span class="login-pill">安全登入</span>
                    <span class="login-pill">工作階段</span>
                    <span class="login-pill">資料服務</span>
                </div>
            </div>
            <div class="login-footer login-footer--desktop">
                EwoooC {{ config.get('SYSTEM_VERSION', '') }}
            </div>
        </section>

        <section class="login-panel-wrap" aria-label="登入表單">
            <div class="login-card">
                <div class="login-card__head">
                    <span>安全入口</span>
                    <h2>登入系統</h2>
                </div>
                <div class="login-card__body">
                    {% if error %}
                    <div class="login-alert" role="alert">{{ error }}</div>
                    {% endif %}

                    <form method="POST" action="{{ url_for('login') }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                        <div class="login-field">
                            <label for="username" class="login-label">帳號</label>
                            <input
                                type="text"
                                class="login-input login-input--plain"
                                id="username"
                                name="username"
                                value="{{ username or '' }}"
                                placeholder="請輸入帳號"
                                autocomplete="username"
                                {% if auth_mode == 'database' %}required{% endif %}
                                autofocus
                            >
                        </div>

                        <div class="login-field">
                            <label for="password" class="login-label">密碼</label>
                            <div class="password-wrapper">
                                <input
                                    type="password"
                                    class="login-input"
                                    id="password"
                                    name="password"
                                    placeholder="請輸入密碼"
                                    required
                                    autocomplete="current-password"
                                >
                                <button
                                    type="button"
                                    class="password-toggle"
                                    onclick="togglePassword()"
                                    aria-label="顯示密碼"
                                >顯示</button>
                            </div>
                        </div>

                        <button type="submit" class="login-submit">登入</button>
                    </form>
                </div>
                <div class="login-footer login-footer--mobile">
                    EwoooC {{ config.get('SYSTEM_VERSION', '') }}
                </div>
            </div>
        </section>
    </main>

    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const toggleButton = document.querySelector('.password-toggle');
            if (!passwordInput || !toggleButton) return;

            const shouldShow = passwordInput.type === 'password';
            passwordInput.type = shouldShow ? 'text' : 'password';
            toggleButton.textContent = shouldShow ? '隱藏' : '顯示';
            toggleButton.setAttribute('aria-label', shouldShow ? '隱藏密碼' : '顯示密碼');
        }

        document.addEventListener('DOMContentLoaded', function() {
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            if (usernameInput?.value) {
                passwordInput?.focus();
            } else {
                usernameInput?.focus();
            }
        });
    </script>
</body>
</html>
