<?xml version="1.0" encoding="UTF-8"?>
<!-- vim:fdl=1:
-->
<templates id="template" xml:space="preserve">

    <t t-name="PosWidget">
        <div class="point-of-sale">
            <div id="topheader">
                <div id="branding">
                    <img src="/point_of_sale/static/src/img/logo.png" />
                    <span class="placeholder-UsernameWidget"></span>
                </div>
                <div id="rightheader">
                    <div id="order-selector">
                        <button class="neworder-button">+</button>
                        <ol id="orders"></ol>
                    </div>
                    <!-- here goes header buttons -->
                </div>
            </div>
            <div id="content">

                <div id="leftpane">
                    <div id="placeholder-OrderWidget"></div>
                    <footer>
                        <div id="placeholder-PaypadWidget"></div>
                        <div id="placeholder-NumpadWidget"></div>
                    </footer>
                </div>
                <div id="rightpane">
                </div>
            </div>
            <div class="loader">
            </div>
            &lt;!--[if IE]&gt;
            <div class='not-supported-browser'>
                <div class='message'>
                    <img src='/point_of_sale/static/src/img/pos_screenshot.jpg' />
                    <p>
                        The Point of Sale is not supported by Microsoft Internet Explorer. Please use
                        a modern browser like <a href="http://www.mozilla.org/firefox/" target="_blank">Mozilla Firefox</a> 
                        or <a href="http://www.google.com/chrome" target="_blank">Google Chrome</a>. 
                    </p>
                </div>
            </div>
            &lt;![endif]--&gt;
        </div>
    </t>

    <t t-name="SynchNotificationWidget">
        <t t-if="widget.get_nbr_pending() > 0">
            <div class="oe_pos_synch-notification">
                <t   t-esc="widget.get_nbr_pending()"/>
                <div class="oe_status_red"></div>
            </div>
        </t>
        <t t-if="widget.get_nbr_pending() === 0">
            <div class="oe_pos_synch-notification oe_inactive">
                <div class="oe_status_green"></div>
            </div>
        </t>
    </t>

    <t t-name="HeaderButtonWidget">
        <div class="header-button">
            <t t-esc="widget.label" />
        </div>
    </t>

    <t t-name="PosCloseWarning">
        <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
    </t>

    <t t-name="PaypadWidget">
        <div id="paypad">
        </div>
    </t>

    <t t-name="NumpadWidget">
        <div id="numpad">
            <button class="input-button number-char">1</button>
            <button class="input-button number-char">2</button>
            <button class="input-button number-char">3</button>
            <button class="mode-button" data-mode='quantity'>Qty</button>
            <br />
            <button class="input-button number-char">4</button>
            <button class="input-button number-char">5</button>
            <button class="input-button number-char">6</button>
            <button class="mode-button" data-mode='discount'>Disc</button>
            <br />
            <button class="input-button number-char">7</button>
            <button class="input-button number-char">8</button>
            <button class="input-button number-char">9</button>
            <button class="mode-button" data-mode='price'>Price</button>
            <br />
            <button class="input-button" id="numpad-minus" >+/-</button>
            <button class="input-button number-char">0</button>
            <button class="input-button number-char">.</button>
            <button class="input-button" id="numpad-backspace">
                <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
            </button>
            <br />
        </div>
    </t>

    <t t-name="CategoryButton">
        <li class='category-button'>
            <div class="category-img">
                <img src="" />
            </div>
            <div class="category-name">
                <t t-esc="category.name"/>
            </div>
        </li>
    </t>

    <t t-name="CategorySimpleButton">
        <li class='category-simple-button'>
            <t t-esc="category.name"/>
        </li>
    </t>

    <t t-name="ProductCategoriesWidget">
        <header>
            <ol class="breadcrumb">
                <li class="oe-pos-categories-list">
                    <a href="javascript:void(0)">
                        <img src="/point_of_sale/static/src/img/home.png" class="homeimg" />
                    </a>
                </li>
                <t t-foreach="widget.breadcrumb" t-as="category">
                    <li class="oe-pos-categories-list">
                        <img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow" />
                        <a href="javascript:void(0)" t-att-data-category-id="category.id">
                            <t t-esc="category.name"/>
                        </a>
                    </li>
                </t>
            </ol>
            <div class="searchbox">
                <input placeholder="Search Products" />
                <img class="search-clear" src="/point_of_sale/static/src/img/search_reset.gif" />
            </div>
        </header>
        <t t-if="widget.subcategories.length > 0">
            <div id="categories">
                <div class="white-gradient"></div>
                <ol class="category-list">
                </ol>
                <div class="shadow-top"></div>
            </div>
        </t>
    </t>

    <t t-name="ProductListWidget">
        <div class='product-list-container'>
            <div class="product-list-scroller">
                <ol id="products-screen-ol" class="product-list">
                </ol>
            </div>
            <div class="shadow-top"></div>
            <span class="placeholder-ScrollbarWidget" />
        </div>
    </t>

    <t t-name="ProductScreenWidget">
        <div id="products-screen" class="screen">
            <table class="layout-table">

                <tr class="header-row">
                    <td class="header-cell">
                        <span class="placeholder-ProductCategoriesWidget" />
                    </td>
                </tr>

                <tr class="content-row">
                    <td class="content-cell">
                        <div class="content-container">
                            <span class="placeholder-ProductListWidget" />
                        </div>
                    </td>
                </tr>

            </table>
        </div>
    </t>

    <t t-name="ScaleScreenWidget">
        <div class="scale-screen screen">
            <header><h2>Product Weighting</h2></header>
            <div class="display">
                <span class="weight">
                    <p>
                        <t t-esc="widget.get_product_weight().toFixed(3)" />
                        Kg
                    </p>
                </span>
                <span class="product-name">
                    <t t-esc="widget.get_product_name()" />
                </span>
                <div class="product-picture">
                    <span class="product-price">
                        <t t-esc="widget.format_currency(widget.get_product_price()) + '/Kg'" />
                    </span> 
                    <t t-if="widget.get_product()">
                        <img t-att-src="widget.get_product().get_image_url()" />
                    </t>
                </div>
            </div>
        </div>
    </t>

    <t t-name="PaymentScreenWidget">
        <div id="payment-screen" class="screen">
            <header><h2>Payment</h2></header>
            <div class="pos-step-container">
                <div class="pos-payment-container">
                    <br />
                    <div class="header">
                        <span class="left-block">
                            Total:
                        </span>
                        <span class='right-block' id="payment-due-total"></span>
                    </div>
                    <table id="paymentlines">
                    </table>
                    <div class="footer">
                        <div class="infoline">
                            <span class='left-block'>
                                Paid:
                            </span>
                            <span class='right-block' id="payment-paid-total"></span>
                        </div>
                        <div class="infoline">
                            <span class='left-block'>
                                Remaining:
                            </span>
                            <span class='right-block' id="payment-remaining"></span>
                        </div>
                        <div class="infoline" >
                            <span class='left-block'>
                                Change:
                            </span>
                            <span class='right-block' id="payment-change"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t> <!-- pos-payment-screen -->

    <t t-name="ReceiptScreenWidget">
        <div id="receipt-screen" class="screen" >
            <header><h2>Receipt</h2></header>
            <div class="pos-step-container">
                <div class="pos-receipt-container">
                </div>
            </div>
        </div>
    </t>

    <t t-name="WelcomeScreenWidget">
        <div class="welcome-screen screen">
            <header><h2>Welcome</h2></header>
            <div class="dialog">
            <img src="/point_of_sale/static/src/img/scan.png" />
            <p> Please scan an item or your member card </p>
            </div>
        </div>
        <div class="goodbye-message">
            <p>Thank you for shopping with us.</p>
        </div>
    </t>


    <t t-name="ScanProductScreenWidget">
        <div class="scan-product-screen screen">
            <header><h2>Please scan an item</h2></header>
            <img src="/point_of_sale/static/src/img/scan.png" />
        </div>
    </t>

    <t t-name="ClientPaymentScreenWidget">
        <div class="scan-product-screen screen">
            <header><h2>Payment</h2></header>
            <div class="dialog">
                <img src="/point_of_sale/static/src/img/bancontact.png" />
                <p>Please insert your card in the reader and follow the instructions to complete
            your purchase</p>
            </div>
        </div>
    </t>

    <t t-name="ScaleInviteScreenWidget">
        <div class="scale-invite-screen screen">
            <header><h2>Please put your product on the scale</h2></header>
            <img src="/point_of_sale/static/src/img/scale.png" />
        </div>
    </t>

    <t t-name="ScaleProductSelectionScreenWidget">
        <div class="scale-product-selection-screen">
            <span class="placeholder-ProductCategoriesWidget" />
            <span class="placeholder-ProductListWidget" />
        </div>
    </t>

    <t t-name="HelpPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-help">
                <p class="message">Please be patient, help is on the way</p>
                <div class="footer">
                    <div class="button">
                        Cancel
                    </div>
                </div>
            </div>
        </div>
    </t>

    <t t-name="ChooseReceiptPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-help">
                <p class="message">Welcome <t t-esc="widget.get_client_name()" /><br /> Choose your type of receipt:</p>
                <div class = "button big-left receipt">
                    Ticket
                </div>
                <div class = "button big-right invoice">
                    Invoice
                </div>
            </div>
        </div>
    </t>

    <t t-name="ProductErrorPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-help">
                <p class="message">The scanned product was not recognized<br /> Please wait, a cashier is on the way</p>
            </div>
        </div>
        <div class="footer">
            <div class="button">
                Ok
            </div>
        </div>
    </t>

    <t t-name="ErrorSessionPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-help">
                <p class="message">Sorry, we could not create a session for this user.</p>
            </div>
        </div>
    </t>

    <t t-name="ErrorNegativePricePopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-help">
                <p class="message">Your order has to be validated by a cashier.</p>
            </div>
        </div>
    </t>

    <t t-name="ErrorPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-help">
                <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
                <p class="comment"><t t-esc=" widget.comment || '' "/></p>
            </div>
        </div>
    </t>

    <t t-name="ProductWidget">
        <li class='product'>
            <a href="#">
                <div class="product-img">
                    <img src='' /> <!-- the product thumbnail -->
                    <t t-if="!widget.model.get('to_weight')">
                        <span class="price-tag">
                            <t t-esc="widget.format_currency(widget.model.get('price'))"/>
                        </span>
                    </t>
                    <t t-if="widget.model.get('to_weight')">
                        <span class="price-tag">
                            <t t-esc="widget.format_currency(widget.model.get('price'))+'/Kg'"/>
                        </span>
                    </t>
                </div>
                <div class="product-name">
                    <t t-esc="widget.model.get('name')"/>
                </div>
            </a>
        </li>
    </t>

    <t t-name="ScrollbarWidget">
        <div class='scrollbar'>
            <div class='up-button button oe_e'>
                &amp;atilde;
            </div>

            <div class='scroller'>
            </div>

            <div class='down-button button oe_e'>
                &amp;auml;
            </div>
        </div>
    </t>

    <t t-name="OrderWidget">
        <div class="order-container">
            <div class="order-scroller">
                <div class="order">
                    <ul class="orderlines">
                        <t t-if="widget.pos.get('selectedOrder').get('orderLines').length === 0">
                            <li class="orderline empty">
                                Your shopping cart is empty
                            </li>
                        </t>

                    </ul>
                    <div class="summary">
                        <div t-attf-class="line #{widget.pos.get('selectedOrder').get('orderLines').length === 0 ? 'empty' : ''}">
                            <div class='entry total'>
                                <span class="label">Total: </span> <span class="value">0.00 €</span>
                                <div class='subentry'>Taxes: <span class="value">0.00€</span></div>
                            </div>
                        </div>
                        <div class='clear'></div>
                    </div>
                </div>
            </div>
            <div class="shadow-top"></div>
            <span class="placeholder-ScrollbarWidget"></span>
        </div>
    </t>

    <t t-name="DebugWidget">
        <div class="debug-widget">
            <h1>Debug Window</h1>
            <div class="toggle">▾</div>
            <div class="content">
                <p class="category">Payment Terminal</p>

                <ul>
                    <li class="button accept_payment">Accept Payment</li>
                    <li class="button reject_payment">Reject Payment</li>
                </ul>
                <p class="category">Electronic Scale</p>
                <ul>
                    <li><input type="text" class="weight"></input></li>
                    <li class="button set_weight">Set Weight</li>
                    <li class="button reset_weight">Reset</li>
                </ul>

                <p class="category">Barcode Scanner</p>
                <ul>
                    <li><input type="text" class="ean"></input></li>
                    <li class="button custom_ean">Custom Ean13</li>
                    <li class="button admin_badge">Admin Badge</li>
                    <li class="button client_badge">Client Badge</li>
                    <li class="button soda_33cl">Soda 33cl</li>
                    <li class="button oranges_kg">3.141Kg Oranges</li>
                    <li class="button lemon_price">1.54€ Lemon</li>
                    <li class="button unknown_product">Unknown Product</li>
                    <li class="button invalid_ean">Invalid Ean</li>
                </ul>

                <p class="category">Hardware Status</p>
                <ul>
                    <li class="status help_needed">Help needed</li>
                    <li class="status weighting">Weighting</li>
                    <li class="status transaction">In Transaction</li>
                </ul>
                <p class="category">Hardware Events</p>
                <ul>
                    <li class="event scan_item_success">Scan Item Success</li>
                    <li class="event scan_item_error_unrecognized">Scan Item Unrecognized</li>
                    <li class="event payment_request">Payment Request</li>
                    <li class="event payment_status">Payment Status</li>
                    <li class="event open_cashbox">Open Cashbox</li>
                    <li class="event print_receipt">Print Receipt</li>
                    <li class="event print_pdf_invoice">Print Invoice</li>
                    <li class="event weighting_read_kg">Read Weighting Scale</li>
                </ul>
            </div>
        </div>
    </t>

    <t t-name="OrderlineWidget">
        <li class="orderline">
            <span class="product-name">
                <t t-esc="widget.model.get_product().get('name')"/>
            </span>
            <span class="price">
                <t t-esc="widget.format_currency(widget.model.get_display_price())"/>
            </span>
            <ul class="info-list">
                <t t-if="widget.model.get_quantity_str() !== '1'">
                    <li class="info">
                        <em>
                            <t t-esc="widget.model.get_quantity_str()" />
                        </em>
                        <t t-esc="widget.model.get_unit().name" />
                        at
                        <t t-esc="widget.format_currency(widget.model.get_unit_price())" />
                        /
                        <t t-esc="widget.model.get_unit().name" />
                    </li>
                </t>
                <t t-if="widget.model.get_discount_str() !== '0'">
                    <li class="info">
                        With a 
                        <em>
                            <t t-esc="widget.model.get_discount_str()" />%
                        </em>
                        discount
                    </li>
                </t>
            </ul>
        </li>
    </t>

    <t t-name="PaymentlineWidget">
        <tr class="paymentline">
            <td class="paymentline-type">
                <t t-esc="widget.name"/>
            </td>
            <td class="paymentline-amount pos-right-align">
                <input type="text" t-att-value="widget.payment_line.get_amount().toFixed(2)" />
                <a href='javascript:void(0)' class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></a>
            </td>
        </tr>
    </t>

    <t t-name="PaypadButtonWidget">
        <button class="paypad-button" t-att-cash-register-id="widget.cashRegister.get('id')">
            <t t-esc="widget.cashRegister.get('journal').name"/>
        </button>
        <br />
    </t>

    <t t-name="OrderButtonWidget">
        <li class="order-selector-button">
            <button class="select-order"><t t-esc="(widget.order.get_client() ? widget.order.get_client_name()+' : ':'') + widget.order.get('creationDate').toString('t')"/></button>
        </li>
    </t>

    <t t-name="UsernameWidget">
        <span class="username">
            <t t-esc="widget.get_name()" />
        </span>
    </t>

    <t t-name="PosTicket">
        <div class="pos-sale-ticket">
            
            <div class="pos-right-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
                Date.CultureInfo.formatPatterns.longTime)"/> <t t-esc="widget.currentOrder.attributes.name"/></div>
            <br />
            <t t-esc="widget.company.name"/><br />
            Phone: <t t-esc="widget.company.phone || ''"/><br />
            User: <t t-esc="widget.pos.get('cashier') and widget.pos.get('cashier').name or widget.user.name"/><br />
            Shop: <t t-esc="widget.shop_obj.name"/><br />
            <br />
            <table>
                <colgroup>
                    <col width='50%' />
                    <col width='25%' />
                    <col width='25%' />
                </colgroup>
                <tr t-foreach="widget.currentOrderLines.toArray()" t-as="orderline">
                    <td>
                        <t t-esc="orderline.get_product().get('name')"/>
                         <t t-if="orderline.get_discount() > 0">
                            <div class="pos-disc-font">
                                With a <t t-esc="orderline.get_discount()"/>% discount
                            </div>
                        </t>
                    </td>
                    <td class="pos-right-align">
                        <t t-esc="orderline.get_quantity_str_with_unit()"/>
                    </td>
                    <td class="pos-right-align">
                        <t t-esc="widget.format_currency(orderline.get_display_price())"/>
                    </td>
                </tr>
            </table>
            <br />
            <table>
                <tr><td>Subtotal:</td><td class="pos-right-align">
                    <t t-esc="widget.format_currency(widget.currentOrder.getSubtotal())"/>
                    </td></tr>
                <tr><td>Tax:</td><td class="pos-right-align">
                    <t t-esc="widget.format_currency(widget.currentOrder.getTax())"/>
                    </td></tr>
                <tr><td>Discount:</td><td class="pos-right-align">
                    <t t-esc="widget.format_currency(widget.currentOrder.getDiscountTotal())"/>
                    </td></tr>
                <tr class="emph"><td>Total:</td><td class="pos-right-align">
                    <t t-esc="widget.format_currency(widget.currentOrder.getTotalTaxIncluded())"/>
                    </td></tr>
            </table>
            <br />
            <table>
                <tr t-foreach="widget.currentPaymentLines.toArray()" t-as="pline">
                    <td>
                        <t t-esc="pline.get_cashregister().get('journal_id')[1]"/>
                    </td>
                    <td class="pos-right-align">
                        <t t-esc="widget.format_currency(pline.get_amount())"/>
                    </td>
                </tr>
            </table>
            <br />
            <table>
                <tr><td>Change:</td><td class="pos-right-align">
                    <t t-esc="widget.format_currency(widget.currentOrder.getPaidTotal() - widget.currentOrder.getTotalTaxIncluded())"/>
                    </td></tr>
            </table>
        </div>
    </t>

    <t t-name="ActionBarWidget">
        <div class="pos-actionbar">
            <ul class="pos-actionbar-button-list">
            </ul>
        </div>
    </t>

    <t t-name="ActionButtonWidget">
        <li t-att-class=" 'button '+ (widget.rightalign  ? 'rightalign ' : '') + (widget.disabled ? 'disabled ' : '')">
            <div class='label'>
                <t t-esc="widget.label" />
            </div>
        </li>
    </t>

    <t t-name="ActionButtonWidgetWithIcon">
        <li t-att-class=" 'button '+ (widget.rightalign  ? 'rightalign ' : '') + (widget.disabled ? 'disabled ' : '')">
            <div class='icon'>
                <img t-att-src="widget.icon" />
                <div class='iconlabel'><t t-esc="widget.label" /></div>
            </div>
        </li>
    </t>

    <!-- Onscreen Keyboard : 
         http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
    <t t-name="OnscreenKeyboardFull">
        <div class="keyboard_frame">
            <ul class="keyboard full_keyboard">
                <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
                <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
                <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
                <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
                <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
                <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
                <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
                <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
                <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
                <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
                <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
                <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
                <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
                <li class="delete lastitem">delete</li>
                <li class="tab firstitem">tab</li>
                <li class="letter">q</li>
                <li class="letter">w</li>
                <li class="letter">e</li>
                <li class="letter">r</li>
                <li class="letter">t</li>
                <li class="letter">y</li>
                <li class="letter">u</li>
                <li class="letter">i</li>
                <li class="letter">o</li>
                <li class="letter">p</li>
                <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
                <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
                <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
                <li class="capslock firstitem">caps lock</li>
                <li class="letter">a</li>
                <li class="letter">s</li>
                <li class="letter">d</li>
                <li class="letter">f</li>
                <li class="letter">g</li>
                <li class="letter">h</li>
                <li class="letter">j</li>
                <li class="letter">k</li>
                <li class="letter">l</li>
                <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
                <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
                <li class="return lastitem">return</li>
                <li class="left-shift firstitem">shift</li>
                <li class="letter">z</li>
                <li class="letter">x</li>
                <li class="letter">c</li>
                <li class="letter">v</li>
                <li class="letter">b</li>
                <li class="letter">n</li>
                <li class="letter">m</li>
                <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
                <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
                <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
                <li class="right-shift lastitem">shift</li>
                <li class="space firstitem lastitem">&amp;nbsp;</li>
            </ul>
            <p class="close_button">close</p>
        </div>
    </t>

    <t t-name="OnscreenKeyboardSimple">
        <div class="keyboard_frame">
            <ul class="keyboard simple_keyboard">
                <li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
                <li class="symbol"><span class="off">w</span><span class="on">2</span></li>
                <li class="symbol"><span class="off">e</span><span class="on">3</span></li>
                <li class="symbol"><span class="off">r</span><span class="on">4</span></li>
                <li class="symbol"><span class="off">t</span><span class="on">5</span></li>
                <li class="symbol"><span class="off">y</span><span class="on">6</span></li>
                <li class="symbol"><span class="off">u</span><span class="on">7</span></li>
                <li class="symbol"><span class="off">i</span><span class="on">8</span></li>
                <li class="symbol"><span class="off">o</span><span class="on">9</span></li>
                <li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>

                <li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
                <li class="symbol"><span class="off">s</span><span class="on">#</span></li>
                <li class="symbol"><span class="off">d</span><span class="on">%</span></li>
                <li class="symbol"><span class="off">f</span><span class="on">*</span></li>
                <li class="symbol"><span class="off">g</span><span class="on">/</span></li>
                <li class="symbol"><span class="off">h</span><span class="on">-</span></li>
                <li class="symbol"><span class="off">j</span><span class="on">+</span></li>
                <li class="symbol"><span class="off">k</span><span class="on">(</span></li>
                <li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>

                <li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
                <li class="symbol"><span class="off">x</span><span class="on">!</span></li>
                <li class="symbol"><span class="off">c</span><span class="on">"</span></li>
                <li class="symbol"><span class="off">v</span><span class="on">'</span></li>
                <li class="symbol"><span class="off">b</span><span class="on">:</span></li>
                <li class="symbol"><span class="off">n</span><span class="on">;</span></li>
                <li class="symbol"><span class="off">m</span><span class="on">,</span></li>
                <li class="delete lastitem">delete</li>

                <li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
                <li class="space">&amp;nbsp;</li>
                <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
                <li class="return lastitem">return</li>
            </ul>
            <p class="close_button">close</p>
        </div>
    </t>

</templates>
