{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h2 class="center-text">Login</h2>
    <div style="background: #fff3cd; color: #856404; border: 3px solid #856404; padding: 2em; font-size: 2em; text-align: center;">
    <b>WARNING: Your login is not working.</b><br>
    This demo is hosted on Hugging Face Spaces, which does <b>NOT</b> permit browser logins due to its cookie/proxy restrictions.
    <br><br>
    <b>You cannot log in or use session-based features on this website.</b>
    <br><br>
    <span style="color:red;">If you need login features, <u>run this project locally</u> on your own computer or a proper host! The code is in Github.</span>
    </div>
    <form method="POST">
        <div class="mb-3">
            <label for="email" class="form-label">Email:</label>
            <input type="email" class="form-control" id="email" autocomplete="off" name="email" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password:</label>
            <input type="password" class="form-control" id="password" autocomplete="off" name="password" required>
        </div>
        <input type="hidden" id="message" value="{{ message }}">
        <div class="btn-center">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </form>
    <div class="modal fade" id="loginAlertModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalLabel">Login Alert</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    $(document).ready(function() {
        var message = $('#message').val();
        if (message) {
            $('#loginAlertModal .modal-body').text(message);
            $('#loginAlertModal').modal('show');
        } 
    });
</script>
{% endblock %}