{% extends "baselayout.html" %}

{% load i18n %}

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

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

{% block content %}
<h1 class="formheading">{% translate "Transfer Money" %}</h1>
<form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/transfer">
    {% csrf_token %}
    <div class="flex forminput">
        <select name="recipientuser" id="transfer-recipient" required>
            <option value="" selected disabled>Recipient</option>
            {% for user_ in user_list %}
            {% if user_.id != user.id %}
            <option value="{{user_.id}}">
            {% if user_.first_name %}
                {% if user_.last_name %}
                {{ user_.last_name }},
                {% endif %}
                {{ user_.first_name }}
            {% elif user_.last_name %}
                {{ user_.last_name }}
            {% else %}
                {{ user_.username }}
            {% endif %}
            {% endif %}
            </option>
            {% endfor %}
        </select>
    </div>
    <div class="flex forminput">
        <input type="number" name="transferamount" class="keyboard-input" max="{{ user.balance }}" min="0.01" step="0.01" placeholder="{% translate 'Amount' %} ({{ currency_suffix }})" autofocus required>
    </div>
    <!-- Virtual Keyboard -->
    <div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
    <script src="/static/js/simple-keyboard.js"></script>
    <script src="/static/js/simple-keyboard_configure.js"></script>
    <div class="flex-center buttons">
        <a href="/" class="button">{% translate "cancel" %}</a>
        <input type="submit" id="submitbtn" class="button" value='{% translate "confirm" %}'>
    </div>
</form>
<div id="statusinfo"></div>
<script src="/static/js/custom_form.js"></script>
<script src="/static/js/autoreload.js"></script>
{% endblock %}