<!-- templates/login.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>리얼컴 NAS UI 로그인</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <style>
        body { background: #f5f7fa; }
        .login-container {
            max-width: 400px; margin: 80px auto; background: #fff;
            border-radius: 14px; box-shadow: 0 4px 24px #dde2ea;
            padding: 2.5rem 2.2rem 2.3rem 2.2rem;
        }
        .login-title { font-weight: 700; font-size: 1.35rem; margin-bottom: 1.5rem; }
        .form-label { font-weight: 500; }
        .btn-primary { width: 100%; }
        .alert { padding: .6rem 1.2rem; }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-title text-center mb-4">
            리얼컴 NAS UI 로그인
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="alert alert-{{ category }} mb-2">{{ message }}</div>
            {% endfor %}
          {% endif %}
        {% endwith %}

        <form method="POST" autocomplete="off">
            <div class="mb-3">
                <label for="username" class="form-label">아이디</label>
                <input type="text" class="form-control" id="username" name="username"
                       value="{{ request.form.username or '' }}" autofocus required>
            </div>

            <div class="mb-3">
                <label for="password" class="form-label">비밀번호</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>

            <div class="mb-4">
                <label for="access_type" class="form-label">접속 유형 선택</label>
                <select class="form-select" id="access_type" name="access_type" required>

                    <!-- 기본 선택: 고급 파일 탐색기 -->
                    <option value="elfinder"
                        {% if not request.form.access_type or request.form.access_type == 'elfinder' %}selected{% endif %}>
                        공유 파일 탐색기
                    </option>

                    <!-- 관리자 UI -->
                    <option value="admin_ui"
                        {% if request.form.access_type == 'admin_ui' %}selected{% endif %}>
                        관리자 UI
                    </option>

                </select>
            </div>

            <button type="submit" class="btn btn-primary">로그인</button>
        </form>
    </div>
</body>
</html>
