{% extends 'base.html' %}

{% block title %}Keyboard{% endblock %}

{% block buttons %}
<div class="track-container">
    <button class="track-button"></button>
</div>
<div class="key-container">
    <button class="grid-key" style="">`</button>
    <button class="grid-key" style="">1</button>
    <button class="grid-key" style="">2</button>
    <button class="grid-key" style="">3</button>
    <button class="grid-key" style="">4</button>
    <button class="grid-key" style="">5</button>
    <button class="grid-key" style="">6</button>
    <button class="grid-key" style="">7</button>
    <button class="grid-key" style="">8</button>
    <button class="grid-key" style="">9</button>
    <button class="grid-key" style="">0</button>
    <button class="grid-key" style="">-</button>
    <button class="grid-key" style="">=</button>
    <button class="grid-key" style="grid-column-end: span 7">BACK</button>
    
    
    <button class="grid-key" style="grid-column-end: span 7">TAB</button>
    <button class="grid-key" style="">q</button>
    <button class="grid-key" style="">w</button>
    <button class="grid-key" style="">e</button>
    <button class="grid-key" style="">r</button>
    <button class="grid-key" style="">t</button>
    <button class="grid-key" style="">y</button>
    <button class="grid-key" style="">u</button>
    <button class="grid-key" style="">i</button>
    <button class="grid-key" style="">o</button>
    <button class="grid-key" style="">p</button>
    <button class="grid-key" style="">[</button>
    <button class="grid-key" style="">]</button>
    <button class="grid-key" style="">\</button>
    
    <button class="grid-key" style="grid-column-end: span 8">CAPS</button>
    <button class="grid-key" style="">a</button>
    <button class="grid-key" style="">s</button>
    <button class="grid-key" style="">d</button>
    <button class="grid-key" style="">f</button>
    <button class="grid-key" style="">g</button>
    <button class="grid-key" style="">h</button>
    <button class="grid-key" style="">j</button>
    <button class="grid-key" style="">k</button>
    <button class="grid-key" style="">l</button>
    <button class="grid-key" style="">;</button>
    <button class="grid-key" style="">'</button>
    <button class="grid-key" style="grid-column-end: span 7">ENTER</button>
    
    <!--<button class="grid-key" style="grid-column-end: span 10">SHIFT</button>-->
    <button class="grid-key-empty" style="grid-column-end: span 2"></button>
    <button class="grid-key" style="">_</button>
    <button class="grid-key" style="">|</button>

    <button class="grid-key" style="">z</button>
    <button class="grid-key" style="">x</button>
    <button class="grid-key" style="">c</button>
    <button class="grid-key" style="">v</button>
    <button class="grid-key" style="">b</button>
    <button class="grid-key" style="">n</button>
    <button class="grid-key" style="">m</button>
    <button class="grid-key" style="">,</button>
    <button class="grid-key" style="">.</button>
    <button class="grid-key" style="">/</button>
    
    <button class="grid-key" style="">:</button>
    <button class="grid-key" style="">?</button>
    <button class="grid-key-empty" style="grid-column-end: span 1"></button>
    <!--<button class="grid-key" style="grid-column-end: span 9">SHIFT</button>-->

    <button class="grid-key" style="grid-column-end: span 5">CTRL</button>
    <button class="grid-key" style="">ALT</button>
    <button class="grid-key" style="grid-column-end: span 25">SPACE</button>
    <button class="grid-key" style="">ALT</button>
    <button class="grid-key" style="grid-column-end: span 5">CTRL</button>

    <button class="grid-key" style="">LT</button>
    <button class="grid-key" style="">UP</button>
    <button class="grid-key" style="">DN</button>
    <button class="grid-key" style="">RT</button>
</div>
{% endblock %}
