{% extends "layout.html" %}

{% block title %}
    Login
{% endblock %}

{% block main %}
<div class="container">
    <br>
    <h1>Login</h1>
    <br>
    {% if error %}
    <p class="error">{{ error }}</p>
    {% endif %}
    <form action="/login" method="POST">
        <div class="form-group">
            <label for="pin">Enter PIN below:</label>
            <div class="input-container">
                <input type="text" id="pin" name="pin" maxlength="6" minlength="6" required>
            </div>
        </div>
        <br>
        <div class="form-group submit-button">
            <input type="submit" value="Submit">
        </div>
        <br>
        <details>
            <summary>Where to find the PIN?</summary>
            <br>
            <p>The PIN can be found on the comma device:</p>
            <p><b>Settings ➡️ Device ➡️ Fleet Manager PIN</b></p>
            <img src=" {{ url_for("static", filename="fleet_pin.png")}}" alt="Fleet Manager Pin Location" style="max-width: 100%; height: auto;">
            <br><br>
        </details>
    </form>
</div>
{% endblock %}