{% extends "baselayout.html" %}

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

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

{% block headAdditional %}
    <link rel="stylesheet" href="/static/css/login.css">
{% endblock %}

{% block content %}

    {% if error_message %}
        <p class="errortext">{{ error_message }}</p>
    {% endif %}

    <div class="passwordoverlaycontainer nodisplay" id="passwordoverlaycontainer">
            
        <div class="passwordoverlay">

            <form method="post" action="{% url 'login' %}" class="loginform">
                {% csrf_token %}
                <h1>{% translate "Log in" %}</h1>
                <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" placeholder='{% translate "Password/PIN" %}'>

                <div class="pinpad">
                    <table>
                        <tr>
                            <td><button type="button" class="pinpadbtn" data-btn="1">1</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="2">2</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="3">3</button></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="pinpadbtn" data-btn="4">4</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="5">5</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="6">6</button></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="pinpadbtn" data-btn="7">7</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="8">8</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="9">9</button></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="pinpadbtn" data-btn="x">x</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="0">0</button></td>
                            <td><button type="button" class="pinpadbtn" data-btn="enter">&#9166;</button></td>
                        </tr>
                    </table>
                </div>

                <div class="horizontalbuttonlist">
                    <button type="button" id="pwocancel">{% translate "cancel" %}</button>
                    <input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
                </div>
            
            </form>

        </div>
    </div>

    <h1>{% translate "Choose your account" %}</h1>

    <div class="userlistcontainer" id="userlistcontainer">
        <ul class="userlist">
            {% for user_ in user_list %}
                <li class="userlistbutton button" data-username="{{ user_.username }}">
                    <img src="/profilepictures?name={{ user_.profile_picture_filename|urlencode }}">
                    <div>
                        {% 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 %}