{% extends "baselayout.html" %}

{% load i18n %}
{% load static %}

{% block title %}
{% translate "Drinks - Login" %}
{% endblock %}

{% block headAdditional %}
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
{% endblock %}

{% block content %}
{% if error_message %}
<p class="errortext">{{ error_message }}</p>
{% endif %}
<div class="flex flex-column gap-1rem nodisplay" id="passwordoverlay-container">
    <div class="passwordoverlay">
        <h1>{% translate "Log in" %}</h1>
        <form method="post" action="{% url 'login' %}" class="flex flex-center loginform">
            {% csrf_token %}
            <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
            <input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" placeholder='{% translate "Password/PIN" %}'>
            <div class="buttons">
                <button type="button" id="pwocancel">{% translate "cancel" %}</button>
                <input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
            </div>
        </form>
    </div>
    <!-- Virtual Keyboard -->
    {% get_current_language as LANGUAGE_CODE %}
    <div id="keyboard" class="simple-keyboard" data-layout="{{LANGUAGE_CODE}}"></div>
    <script src="/static/js/simple-keyboard.js"></script>
    <script src="/static/js/simple-keyboard_configure.js"></script>
</div>
<div class="flex flex-column flex-center">
    <h1>{% translate "Choose your account" %}</h1>
    <ul class="flex flex-center flex-wrap userlist">
        {% for user_ in user_list %}
        <li class="flex flex-center userlistbutton button" data-username="{{ user_.username }}">
            <img src="/profilepictures/{{ user_.profile_picture_filename|urlencode }}">
            <div class="flex flex-center">
            {% if user_.first_name %}
                {% if user_.last_name %}
                {{ user_.last_name }},
                {% endif %}
                {{ user_.first_name }}
            {% else %}
                {{ user_.username }}
            {% endif %}
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
<script src="/static/js/login.js"></script>
{% endblock %}