<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/cdn_bootstrap_5-3_min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap_docs_5-3.css') }}">
    <script src="{{ url_for('static', filename='bootstrap/js/cdn_bootstrap_5-3.js') }}"></script>
    <title>a2d PIN</title>
    <link rel="icon" type="image/png" href="{{ url_for('get_image') }}">
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <script src="{{ url_for('static', filename='js/login_buttons.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap_5-3_mode.js') }}"></script>

    <!-- Navbar -->
    {% include 'navbar_login.html' %}
    
    <div class="container-fluid" style="margin-left: 0px; display: flex; justify-content: center; align-items: center;">
        <div class="row justify-content-md-center">
            
            <h6 id="staticBackdropLabel" style="display: flex; justify-content: center; align-items: center;">PIN</h6>
            
            <form id="pinForm" action="/login" method="POST">
                <div class="modal-body" style="display: flex; justify-content: center; align-items: center;">
                    <div class="mb-3">
                        <input type="password" name="digit1" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit2')" id="digit1Input">
                        <input type="password" name="digit2" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit3')" id="digit2Input">
                        <input type="password" name="digit3" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit4')" id="digit3Input">
                        <input type="password" name="digit4" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit5')" id="digit4Input">
                        <input type="password" name="digit5" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit6')" id="digit5Input">
                        <input type="password" name="digit6" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required id="digit6Input">
                    </div>
                </div>
                <div class="modal-footer" style="display: flex; justify-content: center; align-items: center;">
                    <button type="button" class="btn btn-primary" id="loginButton" name="action" value="login">Login</button> &nbsp; &nbsp;
                    <button type="button" class="btn btn-secondary" id="registerButton" name="action" value="register">Register</button>
                </div>
            </form>
            <div class="mb-3" style="display: flex; justify-content: center; align-items: center;"><br><br>
                {% if error %}
                <label for="interval" class="form-label">Invalid PIN. Please try again.</label>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="container-fluid" style="margin-left: 0px; display: flex; justify-content: center; align-items: center;">
        {% include 'footer.html' %}
    </div>
    
    <script src="{{ url_for('static', filename='js/input_cursor.js') }}"></script>
    <script src="{{ url_for('static', filename='js/clean_pin.js') }}"></script>
    <script src="{{ url_for('static', filename='js/version.js') }}"></script>
</body>
</html>
