{% extends "page.html" %}

{% block stylesheet %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
    body {
        font-family: 'Poppins', sans-serif;
        background-color: #f8f9fa;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .login-container {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 30px;
        max-width: 400px;
        width: 100%;
    }
    .login-container img {
        max-width: 150px;
        margin-bottom: 20px;
    }
    .btn-primary {
        width: 100%;
    }
</style>
{% endblock stylesheet %}

{% block site %}
<div class="login-container text-center">
    <img src="https://i.ibb.co/0GhKf6N/20241120-113020.jpg" alt="Mr Asitha Logo">
    <h4 class="mb-3">Login to MRAsitha'Md VPS</h4>
    
    <form action="{{ base_url }}login?next={{ next }}" method="post">
        {{ xsrf_form_html() | safe }}
        <div class="mb-3">
            <label for="password_input" class="form-label">
                <strong>{% if token_available %}Jupyter token{% else %}Password{% endif %}:</strong>
            </label>
            <input type="password" id="password_input" name="password" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary" id="login_submit">Log In</button>
    </form>
</div>
{% endblock site %}

{% block script %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock script %}