<!DOCTYPE html>
<html>
<head>
    <title>Open-Instruct Human Evaluation</title>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="row">
        <div id="nav" class="col-md-3">
            <!-- Title -->
            <h2 class="text-center" id="title"><a href="/" style="text-decoration: none">🕵 Human Evaluation</a></h2>

            <!-- Log-in and sign-up -->
            <div class="row" id="login-region">
                <div class="col-12 text-center">
                    <!-- <form class="m-5" method="POST">
                        <div class="form-group mt-4">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group mt-4 mb-5">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary m-1">Login</button>
                        <button type="button" class="btn btn-primary m-1" >Sign Up</button>
                    </form>  -->
                    <form class="m-5" id="authForm" action="/login" method="post">
                        <div class="form-group mt-4">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group mt-4 mb-5">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <input type="submit" class="btn btn-primary m-1" value="Login" id="submitBtn">
                    </form>
                    
                    <button id="toggleAuthMode" class="btn btn-primary m-1">Switch to Signup</button>
                    
                </div>
            </div>
        </div>

        <div class="col-md-9"></div>
    </div>
</body>

<script>
    $(document).ready(function() {
    var isLoginMode = true;

    $('#toggleAuthMode').click(function() {
        if (isLoginMode) {
            // switch to signup mode
            $('#authForm').attr('action', '/signup');
            $('#signupFields').show();
            $('#submitBtn').val('Signup');
            $(this).text('Switch to Login');
        } else {
            // switch to login mode
            $('#authForm').attr('action', '/login');
            $('#signupFields').hide();
            $('#submitBtn').val('Login');
            $(this).text('Switch to Signup');
        }
        isLoginMode = !isLoginMode;
    });
});

</script>
</html>
