{% extends "base.html" %}

{% block head %}
{{ super() }}
<style>
    svg {
        width: 400px;
        height: auto;
    }
</style>
{% endblock %}

{% block header %}
<h1>Welcome, {{ username }}</h1>
{{ super() }}
{% endblock %}

{% block main %}

<svg id="touchkey-svg" width="400" height="400"></svg>

<form method="post" action="/touchkey" id="loginform" accept-charset="UTF-8">
    <input type="hidden" name="uid" value="{{ uid }}" />
    <input type="hidden" name="username" value="{{ username }}" />
    <input type="hidden" name="touchkey" value="" id="loginform-touchkey-value" />
    {% if buypid %}
    <input type="hidden" name="buypid" value="{{ buypid }}" />
    {% endif %}
</form>
<a href="/">Cancel</a>

<script src="/static/js/touchkey.js"></script>
<script>
    initTouchkey(false, 'touchkey-svg', 'loginform', 'loginform-touchkey-value');
</script>

{{ super() }}

{% endblock %}