addons/point_of_sale/static/src/xml/pos.xml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- vim:fdl=1:
   3 -->
   4 <templates id="template" xml:space="preserve">
   5
   6     <t t-name="PosWidget">
   7         <div class="pos">
   8             <div class="pos-topheader">
   9                 <div class="pos-branding">
  10                     <img class="pos-logo" src="/point_of_sale/static/src/img/logo.png" />
  11                     <span class="placeholder-UsernameWidget"></span>
  12                 </div>
  13                 <div class="pos-rightheader">
  14                     <div class="order-selector">
  15                         <span class="orders"></span>
  16                         <span class="order-button square neworder-button"><i class='fa fa-plus' /></span>
  17                         <span class="order-button square deleteorder-button"><i class='fa fa-minus' /></span>
  18                     </div>
  19                     <!-- here goes header buttons -->
  20                 </div>
  21             </div>
  22
  23             <div class="pos-content">
  24
  25                 <div class="pos-leftpane">
  26                     <div class='window'>
  27                         <div class='subwindow'>
  28                             <div class='subwindow-container'>
  29                                 <div class='subwindow-container-fix'>
  30                                     <div class="placeholder-OrderWidget"></div>
  31                                 </div>
  32                             </div>
  33                         </div>
  34
  35                         <div class='subwindow collapsed'>
  36                             <div class='subwindow-container'>
  37                                 <div class='subwindow-container-fix pads'>
  38                                     <div class="control-buttons oe_hidden"></div>
  39                                     <div class="placeholder-ActionpadWidget"></div>
  40                                     <div class="placeholder-NumpadWidget"></div>
  41                                 </div>
  42                             </div>
  43                         </div>
  44
  45                     </div>
  46                 </div>
  47
  48                 <div class="rightpane">
  49                     <div class='window'>
  50                         <div class='subwindow'>
  51                             <div class='subwindow-container'>
  52                                 <div class='subwindow-container-fix screens'>
  53                                 </div>
  54                             </div>
  55                         </div>
  56                     </div>
  57                 </div>
  58
  59                 <div class="placeholder-OnscreenKeyboardWidget"></div>
  60             </div>
  61
  62             <div class="loader">
  63                 <div class='loader-feedback oe_hidden'>
  64                     <h1 class='message'>Loading</h1>
  65                     <div class='progressbar'>
  66                         <div class='progress' width='50%'></div>
  67                     </div>
  68                     <div class='oe_hidden button skip'>
  69                         Skip
  70                     </div>
  71                 </div>
  72             </div>
  73
  74             &lt;!--[if IE]&gt;
  75             <div class='not-supported-browser'>
  76                 <div class='message'>
  77                     <img src='/point_of_sale/static/src/img/pos_screenshot.jpg' />
  78                     <p>
  79                         The Point of Sale is not supported by Microsoft Internet Explorer. Please use
  80                         a modern browser like <a href="http://www.mozilla.org/firefox/" target="_blank">Mozilla Firefox</a>
  81                         or <a href="http://www.google.com/chrome" target="_blank">Google Chrome</a>.
  82                     </p>
  83                 </div>
  84             </div>
  85             &lt;![endif]--&gt;
  86         </div>
  87     </t>
  88
  89     <t t-name="SynchNotificationWidget">
  90         <div class="oe_status js_synch">
  91             <span class='js_msg oe_hidden'>0</span>
  92             <div class="js_connected oe_icon oe_green">
  93                 <i class='fa fa-fw fa-rss'></i>
  94             </div>
  95             <div class="js_connecting oe_icon oe_hidden">
  96                 <i class='fa fa-fw fa-spin fa-spinner'></i>
  97             </div>
  98             <div class="js_disconnected oe_icon oe_red oe_hidden">
  99                 <i class='fa fa-fw fa-rss'></i>
 100             </div>
 101         </div>
 102     </t>
 103
 104     <t t-name="ProxyStatusWidget">
 105         <div class="oe_status js_proxy">
 106             <span class='js_msg oe_orange oe_hidden'></span>
 107             <div class="js_connected oe_icon oe_green">
 108                 <i class='fa fa-fw fa-sitemap'></i>
 109             </div>
 110             <div class="js_connecting oe_icon oe_hidden">
 111                 <i class='fa fa-fw fa-spin fa-spinner'></i>
 112             </div>
 113             <div class="js_warning oe_icon oe_orange oe_hidden">
 114                 <i class='fa fa-fw fa-sitemap'></i>
 115             </div>
 116             <div class="js_disconnected oe_icon oe_red oe_hidden">
 117                 <i class='fa fa-fw fa-sitemap'></i>
 118             </div>
 119         </div>
 120     </t>
 121
 122     <t t-name="HeaderButtonWidget">
 123         <div class="header-button">
 124             <t t-esc="widget.label" />
 125         </div>
 126     </t>
 127
 128     <t t-name="PosCloseWarning">
 129         <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
 130     </t>
 131
 132     <t t-name="ActionpadWidget">
 133         <div class='actionpad'>
 134             <button class='button set-customer'>
 135                 <i class='fa fa-user' /> Set Customer
 136             </button>
 137             <button class="button pay">
 138                 <i class='fa fa-chevron-right' /> Payment
 139             </button>
 140         </div>
 141     </t>
 142
 143     <t t-name="NumpadWidget">
 144         <div class="numpad">
 145             <button class="input-button number-char">1</button>
 146             <button class="input-button number-char">2</button>
 147             <button class="input-button number-char">3</button>
 148             <button class="mode-button" data-mode='quantity'>Qty</button>
 149             <br />
 150             <button class="input-button number-char">4</button>
 151             <button class="input-button number-char">5</button>
 152             <button class="input-button number-char">6</button>
 153             <button class="mode-button" data-mode='discount'>Disc</button>
 154             <br />
 155             <button class="input-button number-char">7</button>
 156             <button class="input-button number-char">8</button>
 157             <button class="input-button number-char">9</button>
 158             <button class="mode-button" data-mode='price'>Price</button>
 159             <br />
 160             <button class="input-button numpad-minus" >+/-</button>
 161             <button class="input-button number-char">0</button>
 162             <button class="input-button number-char">.</button>
 163             <button class="input-button numpad-backspace">
 164                 <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
 165             </button>
 166             <br />
 167         </div>
 168     </t>
 169
 170     <t t-name="CategoryButton">
 171         <span class='category-button js-category-switch' t-att-data-category-id="category.id" >
 172             <div class="category-img">
 173                 <img t-att-src="image_url" />
 174             </div>
 175             <div class="category-name">
 176                 <t t-esc="category.name"/>
 177             </div>
 178         </span>
 179     </t>
 180
 181     <t t-name="CategorySimpleButton">
 182         <span class='category-simple-button js-category-switch' t-att-data-category-id="category.id" >
 183             <t t-esc="category.name"/>
 184         </span>
 185     </t>
 186
 187     <t t-name="ProductCategoriesWidget">
 188         <div>
 189         <header class='rightpane-header'>
 190             <div class="breadcrumbs">
 191                 <span class="breadcrumb">
 192                     <span class=" breadcrumb-button js-category-switch">
 193                         <img src="/point_of_sale/static/src/img/home.png" class="breadcrumb-homeimg" />
 194                     </span>
 195                 </span>
 196                 <t t-foreach="widget.breadcrumb" t-as="category">
 197                     <span class="breadcrumb">
 198                         <img src="/point_of_sale/static/src/img/bc-arrow-big.png" class="breadcrumb-arrow" />
 199                         <span class="breadcrumb-button js-category-switch" t-att-data-category-id="category.id">
 200                             <t t-esc="category.name"/>
 201                         </span>
 202                     </span>
 203                 </t>
 204             </div>
 205             <div class="searchbox">
 206                 <input placeholder="Search Products" />
 207                 <span class="search-clear"></span>
 208             </div>
 209         </header>
 210         <t t-if="widget.subcategories.length > 0">
 211             <div class="categories">
 212                 <div class="category-list">
 213                 </div>
 214             </div>
 215         </t>
 216         </div>
 217     </t>
 218
 219     <t t-name="ProductListWidget">
 220         <div class='product-list-container'>
 221             <div class="product-list-scroller touch-scrollable">
 222                 <div class="product-list">
 223                 </div>
 224             </div>
 225             <span class="placeholder-ScrollbarWidget" />
 226         </div>
 227     </t>
 228
 229     <t t-name="ProductScreenWidget">
 230         <div class="product-screen screen">
 231             <table class="layout-table">
 232
 233                 <tr class="header-row">
 234                     <td class="header-cell">
 235                         <span class="placeholder-ProductCategoriesWidget" />
 236                     </td>
 237                 </tr>
 238
 239                 <tr class="content-row">
 240                     <td class="content-cell">
 241                         <div class="content-container">
 242                             <span class="placeholder-ProductListWidget" />
 243                         </div>
 244                     </td>
 245                 </tr>
 246
 247             </table>
 248         </div>
 249     </t>
 250
 251     <t t-name="ScaleScreenWidget">
 252         <div class="scale-screen screen">
 253             <div class="screen-content">
 254                 <div class="top-content">
 255                     <span class='button back'>
 256                         <i class='fa fa-angle-double-left'></i>
 257                         Back
 258                     </span>
 259                     <h1 class='product-name'><t t-esc="widget.get_product_name()" /></h1>
 260                 </div>
 261                 <div class="centered-content">
 262                     <div class='weight js-weight'>
 263                         <t t-esc="widget.get_product_weight_string()" />
 264                     </div>
 265                     <div class='product-price'>
 266                         <t t-esc="widget.format_currency(widget.get_product_price()) + '/Kg'" />
 267                     </div>
 268                     <div class='computed-price'>
 269                         123.14 €
 270                     </div>
 271                     <div class='buy-product'>
 272                         Order
 273                         <i class='fa fa-angle-double-right'></i>
 274                     </div>
 275                 </div>
 276             </div>
 277         </div>
 278     </t>
 279
 280     <t t-name="ClientLine">
 281         <tr class='client-line' t-att-data-id='partner.id'>
 282             <td><t t-esc='partner.name' /></td>
 283             <td><t t-esc='partner.address' /></td>
 284             <td><t t-esc='partner.phone or partner.mobile or ""' /></td>
 285         </tr>
 286     </t>
 287
 288     <t t-name="ClientDetailsEdit">
 289         <section class='client-details edit'>
 290             <div class='client-picture'>
 291                 <t t-if='!partner.id'>
 292                     <i class='fa fa-camera'></i>
 293                 </t>
 294                 <t t-if='partner.id'>
 295                     <img t-att-src='widget.partner_icon_url(partner.id)' />
 296                 </t>
 297                 <input type='file' class='image-uploader'></input>
 298             </div>
 299             <input class='detail client-name' name='name' t-att-value='partner.name' placeholder='Name'></input>
 300             <div class='edit-buttons'>
 301                 <div class='button undo'><i class='fa fa-undo' /></div>
 302                 <div class='button save'><i class='fa fa-floppy-o' /></div>
 303             </div>
 304             <div class='client-details-box clearfix'>
 305                 <div class='client-details-left'>
 306                     <div class='client-detail'>
 307                         <span class='label'>Street</span>
 308                         <input class='detail client-address-street' name='street'       t-att-value='partner.street' placeholder='Street'></input>
 309                     </div>
 310                     <div class='client-detail'>
 311                         <span class='label'>City</span>
 312                         <input class='detail client-address-city'   name='city'         t-att-value='partner.city' placeholder='City'></input>
 313                     </div>
 314                     <div class='client-detail'>
 315                         <span class='label'>Postcode</span>
 316                         <input class='detail client-address-zip'    name='zip'          t-att-value='partner.zip' placeholder='ZIP'></input>
 317                     </div>
 318                     <div class='client-detail'>
 319                         <span class='label'>Country</span>
 320                         <select class='detail client-address-country' name='country_id'>
 321                             <option value=''>None</option>
 322                             <t t-foreach='widget.pos.countries' t-as='country'>
 323                                 <option t-att-value='country.id' t-att-selected="partner_country_id ? ((country.id === partner.country_id[0]) ? true : undefined) : undefined">
 324                                     <t t-esc='country.name'/>
 325                                 </option>
 326                             </t>
 327                         </select>
 328                     </div>
 329                 </div>
 330                 <div class='client-details-right'>
 331                     <div class='client-detail'>
 332                         <span class='label'>Email</span>
 333                         <input class='detail client-email'  name='email'    type='email'    t-att-value='partner.email || ""'></input>
 334                     </div>
 335                     <div class='client-detail'>
 336                         <span class='label'>Phone</span>
 337                         <input class='detail client-phone'  name='phone'    type='tel'      t-att-value='partner.phone || ""'></input>
 338                     </div>
 339                     <div class='client-detail'>
 340                         <span class='label'>Barcode</span>
 341                         <input class='detail barcode'       name='ean13'    t-att-value='partner.ean13 || ""'></input>
 342                     </div>
 343                     <div class='client-detail'>
 344                         <span class='label'>Tax ID</span>
 345                         <input class='detail vat'           name='vat'     t-att-value='partner.vat || ""'></input>
 346                     </div>
 347                 </div>
 348             </div>
 349         </section>
 350     </t>
 351     <t t-name="ClientDetails">
 352         <section class='client-details'>
 353             <div class='client-picture'>
 354                 <img t-att-src='widget.partner_icon_url(partner.id)' />
 355             </div>
 356             <div class='client-name'><t t-esc='partner.name' /></div>
 357             <div class='edit-buttons'>
 358                 <div class='button edit'><i class='fa fa-pencil-square' /></div>
 359             </div>
 360             <div class='client-details-box clearfix'>
 361                 <div class='client-details-left'>
 362                     <div class='client-detail'>
 363                         <span class='label'>Address</span>
 364                         <span class='detail client-address'><t t-esc='partner.address' /></span>
 365                     </div>
 366                     <div class='client-detail'>
 367                         <span class='label'>Email</span>
 368                         <span class='detail client-email'><t t-esc='partner.email' /></span>
 369                     </div>
 370                     <div class='client-detail'>
 371                         <span class='label'>Phone</span>
 372                         <t t-if='partner.phone'>
 373                             <span class='detail client-phone'><t t-esc='partner.phone' /></span>
 374                         </t>
 375                         <t t-if='!partner.phone'>
 376                             <span class='detail client-phone empty'>N/A</span>
 377                         </t>
 378                     </div>
 379                 </div>
 380                 <div class='client-details-right'>
 381                     <div class='client-detail'>
 382                         <span class='label'>Barcode</span>
 383                         <t t-if='partner.ean13'>
 384                             <span class='detail client-id'><t t-esc='partner.ean13'/></span>
 385                         </t>
 386                         <t t-if='!partner.ean13'>
 387                             <span class='detail client-id empty'>N/A</span>
 388                         </t>
 389                     </div>
 390                     <div class='client-detail'>
 391                         <span class='label'>Tax ID</span>
 392                         <t t-if='partner.vat'>
 393                             <span class='detail vat'><t t-esc='partner.vat'/></span>
 394                         </t>
 395                         <t t-if='!partner.vat'>
 396                             <span class='detail vat empty'>N/A</span>
 397                         </t>
 398                     </div>
 399                 </div>
 400             </div>
 401         </section>
 402     </t>
 403
 404     <t t-name="ClientListScreenWidget">
 405         <div class="clientlist-screen screen">
 406             <div class="screen-content">
 407                 <section class="top-content">
 408                     <span class='button back'>
 409                         <i class='fa fa-angle-double-left'></i>
 410                         Cancel
 411                     </span>
 412                     <span class='searchbox'>
 413                         <input placeholder='Search Customers' />
 414                         <span class='search-clear'></span>
 415                     </span>
 416                     <span class='searchbox'></span>
 417                     <span class='button new-customer'>
 418                         <i class='fa fa-user'></i>
 419                         <i class='fa fa-plus'></i>
 420                     </span>
 421                     <span class='button next oe_hidden highlight'>
 422                         Select Customer
 423                         <i class='fa fa-angle-double-right'></i>
 424                     </span>
 425                 </section>
 426                 <section class="full-content">
 427                     <div class='window'>
 428                         <section class='subwindow collapsed'>
 429                             <div class='subwindow-container'>
 430                                 <div class='subwindow-container-fix client-details-contents'>
 431                                 </div>
 432                             </div>
 433                         </section>
 434                         <section class='subwindow'>
 435                             <div class='subwindow-container'>
 436                                 <div class='subwindow-container-fix touch-scrollable scrollable-y'>
 437                                     <table class='client-list'>
 438                                         <thead>
 439                                             <tr>
 440                                                 <th>Name</th>
 441                                                 <th>Address</th>
 442                                                 <th>Phone</th>
 443                                             </tr>
 444                                         </thead>
 445                                         <tbody class='client-list-contents'>
 446                                         </tbody>
 447                                     </table>
 448                                 </div>
 449                             </div>
 450                         </section>
 451                     </div>
 452                 </section>
 453             </div>
 454         </div>
 455     </t>
 456
 457     <t t-name="PaymentScreen-Paymentlines">
 458         <t t-if="!paymentlines.length">
 459             <div class='paymentlines-empty'>
 460                 <div class='total'>
 461                     <t t-esc="widget.format_currency(order.getTotalTaxIncluded())"/>
 462                 </div>
 463                 <div class='message'>
 464                     Please select a payment method.
 465                 </div>
 466             </div>
 467         </t>
 468
 469         <t t-if="paymentlines.length">
 470             <table class='paymentlines'>
 471                 <colgroup>
 472                     <col class='due' />
 473                     <col class='tendered' />
 474                     <col class='change' />
 475                     <col class='method' />
 476                     <col class='controls' />
 477                 </colgroup>
 478                 <thead>
 479                     <tr class='label'>
 480                         <th>Due</th>
 481                         <th>Tendered</th>
 482                         <th>Change</th>
 483                         <th>Method</th>
 484                         <th></th>
 485                     </tr>
 486                 </thead>
 487                 <tbody>
 488                     <t t-foreach='paymentlines' t-as='line'>
 489                         <t t-if='line.selected'>
 490                             <tr class='paymentline selected'>
 491                                 <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(order.getDueLeft(line))' /> </td>
 492                                 <td class='col-tendered edit'>
 493                                     <t t-esc='widget.inputbuffer' />
 494                                     <!-- <t t-esc='line.get_amount()' /> -->
 495                                 </td>
 496                                 <t t-if='order.getChange(line)'>
 497                                     <td class='col-change highlight' >
 498                                         <t t-esc='widget.format_currency_no_symbol(order.getChange(line))' />
 499                                     </td>
 500                                 </t>
 501                                 <t t-if='!order.getChange(line)'>
 502                                     <td class='col-change' ></td>
 503                                 </t>
 504
 505                                 <td class='col-name' > <t t-esc='line.name' /> </td>
 506                                 <td class='delete-button' t-att-data-cid='line.cid'> <i class='fa fa-times-circle' /> </td>
 507                             </tr>
 508                         </t>
 509                         <t t-if='!line.selected'>
 510                             <tr class='paymentline' t-att-data-cid='line.cid'>
 511                                 <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(order.getDueLeft(line))' /> </td>
 512                                 <td class='col-tendered'> <t t-esc='widget.format_currency_no_symbol(line.get_amount())' /> </td>
 513                                 <td class='col-change'>
 514                                     <t t-if='order.getChange(line)'>
 515                                         <t t-esc='widget.format_currency_no_symbol(order.getChange(line))' />
 516                                      </t>
 517                                 </td>
 518                                 <td class='col-name'> <t t-esc='line.name' /> </td>
 519                                 <td class='delete-button' t-att-data-cid='line.cid'> <i class='fa fa-times-circle' /> </td>
 520                             </tr>
 521                         </t>
 522                     </t>
 523                 </tbody>
 524             </table>
 525         </t>
 526
 527     </t>
 528
 529     <t t-name="PaymentScreen-Numpad">
 530         <div class="numpad">
 531             <button class="input-button number-char" data-action='1'>1</button>
 532             <button class="input-button number-char" data-action='2'>2</button>
 533             <button class="input-button number-char" data-action='3'>3</button>
 534             <button class="mode-button" data-action='+10'>+10</button>
 535             <br />
 536             <button class="input-button number-char" data-action='4'>4</button>
 537             <button class="input-button number-char" data-action='5'>5</button>
 538             <button class="input-button number-char" data-action='6'>6</button>
 539             <button class="mode-button" data-action='+20'>+20</button>
 540             <br />
 541             <button class="input-button number-char" data-action='7'>7</button>
 542             <button class="input-button number-char" data-action='8'>8</button>
 543             <button class="input-button number-char" data-action='9'>9</button>
 544             <button class="mode-button" data-action='+50'>+50</button>
 545             <br />
 546             <button class="input-button numpad-char" data-action='CLEAR' >C</button>
 547             <button class="input-button number-char" data-action='0'>0</button>
 548             <button class="input-button number-char" data-action='.'>.</button>
 549             <button class="input-button numpad-backspace" data-action='BACKSPACE' >
 550                 <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
 551             </button>
 552             <br />
 553         </div>
 554     </t>
 555
 556     <t t-name="PaymentScreen-Paymentmethods">
 557         <div class='paymentmethods'>
 558             <t t-foreach="widget.pos.cashregisters" t-as="cashregister">
 559                 <div class="paymentmethod" t-att-data-id="cashregister.journal_id[0]">
 560                     <t t-esc="cashregister.journal_id[1]" />
 561                 </div>
 562             </t>
 563         </div>
 564     </t>
 565
 566     <t t-name="PaymentScreenWidget">
 567         <div class='payment-screen screen'>
 568             <div class='screen-content'>
 569                 <div class='top-content'>
 570                     <span class='button back'>
 571                         <i class='fa fa-angle-double-left'></i>
 572                         Back
 573                     </span>
 574                     <h1>Payment</h1>
 575                     <span class='button next'>
 576                         Validate
 577                         <i class='fa fa-angle-double-right'></i>
 578                     </span>
 579                 </div>
 580                 <div class='left-content pc40 touch-scrollable scrollable-y'>
 581
 582                     <div class='paymentmethods-container'>
 583                     </div>
 584
 585                 </div>
 586                 <div class='right-content pc60 touch-scrollable scrollable-y'>
 587
 588                     <section class='paymentlines-container'>
 589                     </section>
 590
 591                     <section class='payment-numpad'>
 592                     </section>
 593
 594                     <div class='payment-buttons'>
 595                         <t t-if='widget.pos.config.iface_invoicing'>
 596                             <div t-attf-class='button js_invoice #{ widget.pos.get_order().is_to_invoice() ? "highlight" : ""} '>
 597                                 <i class='fa fa-file-text-o' /> Invoice
 598                             </div>
 599                         </t>
 600                         <t t-if='widget.pos.config.iface_cashdrawer'>
 601                             <div class='button js_invoice'>
 602                                 <i class='fa fa-archive' /> Open Cashbox
 603                             </div>
 604                         </t>
 605                     </div>
 606
 607
 608                 </div>
 609             </div>
 610         </div>
 611
 612     </t>
 613
 614     <t t-name="ReceiptScreenWidget">
 615         <div class='receipt-screen screen'>
 616             <div class='screen-content'>
 617                 <div class='top-content'>
 618                     <h1>Receipt</h1>
 619                     <span class='button next'>
 620                         Next Order
 621                         <i class='fa fa-angle-double-right'></i>
 622                     </span>
 623                 </div>
 624                 <div class="centered-content">
 625                     <div class="button print">
 626                         <i class='fa fa-print'></i> Print
 627                     </div>
 628                     <div class="pos-receipt-container">
 629                     </div>
 630                 </div>
 631             </div>
 632         </div>
 633     </t>
 634
 635     <t t-name="XmlReceipt">
 636         <receipt align='center' width='40' value-thousands-separator='' >
 637             <t t-if='receipt.company.logo'>
 638                 <img t-att-src='receipt.company.logo' />
 639                 <br/>
 640             </t>
 641             <t t-if='!receipt.company.logo'>
 642                 <h1><t t-esc='receipt.company.name' /></h1>
 643                 <br/>
 644             </t>
 645             <div font='b'>
 646                 <t t-if='receipt.shop.name'>
 647                     <div><t t-esc='receipt.shop.name' /></div>
 648                 </t>
 649                 <t t-if='receipt.company.contact_address'>
 650                     <div><t t-esc='receipt.company.contact_address' /></div>
 651                 </t>
 652                 <t t-if='receipt.company.phone'>
 653                     <div>Tel:<t t-esc='receipt.company.phone' /></div>
 654                 </t>
 655                 <t t-if='receipt.company.vat'>
 656                     <div>VAT:<t t-esc='receipt.company.vat' /></div>
 657                 </t>
 658                 <t t-if='receipt.company.email'>
 659                     <div><t t-esc='receipt.company.email' /></div>
 660                 </t>
 661                 <t t-if='receipt.company.website'>
 662                     <div><t t-esc='receipt.company.website' /></div>
 663                 </t>
 664                 <t t-if='receipt.header'>
 665                     <div><t t-esc='receipt.header' /></div>
 666                 </t>
 667                 <t t-if='receipt.cashier'>
 668                     <div>--------------------------------</div>
 669                     <div>Served by <t t-esc='receipt.cashier' /></div>
 670                 </t>
 671             </div>
 672             <br /><br />
 673
 674             <!-- Orderlines -->
 675
 676             <div line-ratio='0.6'>
 677                 <t t-foreach='receipt.orderlines' t-as='line'>
 678                     <t t-set='simple' t-value='line.discount === 0 and line.unit_name === "Unit(s)" and line.quantity === 1' />
 679                     <t t-if='simple'>
 680                         <line>
 681                             <left><t t-esc='line.product_name' /></left>
 682                             <right><value><t t-esc='line.price_display' /></value></right>
 683                         </line>
 684                     </t>
 685                     <t t-if='!simple'>
 686                         <line><left><t t-esc='line.product_name' /></left></line>
 687                         <t t-if='line.discount !== 0'>
 688                             <line indent='1'><left>Discount: <t t-esc='line.discount' />%</left></line>
 689                         </t>
 690                         <line indent='1'>
 691                             <left>
 692                                 <value value-decimals='3' value-autoint='on'>
 693                                     <t t-esc='line.quantity' />
 694                                 </value>
 695                                 <t t-if='line.unit_name !== "Unit(s)"'>
 696                                     <t t-esc='line.unit_name' />
 697                                 </t>
 698                                 x
 699                                 <value value-decimals='2'>
 700                                     <t t-esc='line.price' />
 701                                 </value>
 702                             </left>
 703                             <right>
 704                                 <value><t t-esc='line.price_display' /></value>
 705                             </right>
 706                         </line>
 707                     </t>
 708                 </t>
 709             </div>
 710
 711             <!-- Subtotal -->
 712
 713             <t t-set='taxincluded' t-value='Math.abs(receipt.subtotal - receipt.total_with_tax) &lt;= 0.000001' />
 714             <t t-if='!taxincluded'>
 715                 <line><right>--------</right></line>
 716                 <line><left>Subtotal</left><right> <value><t t-esc="receipt.subtotal" /></value></right></line>
 717                 <t t-foreach='receipt.tax_details' t-as='tax'>
 718                     <line>
 719                         <left><t t-esc='tax.name' /></left>
 720                         <right><value><t t-esc='tax.amount' /></value></right>
 721                     </line>
 722                 </t>
 723             </t>
 724
 725             <!-- Total -->
 726
 727             <line><right>--------</right></line>
 728             <line size='double-height'>
 729                 <left><pre>        TOTAL</pre></left>
 730                 <right><value><t t-esc='receipt.total_with_tax' /></value></right>
 731             </line>
 732             <br/><br/>
 733
 734             <!-- Payment Lines -->
 735
 736             <t t-foreach='receipt.paymentlines' t-as='line'>
 737                 <line>
 738                     <left><t t-esc='line.journal' /></left>
 739                     <right><value><t t-esc='line.amount'/></value></right>
 740                 </line>
 741             </t>
 742             <br/>
 743
 744             <line size='double-height'>
 745                 <left><pre>        CHANGE</pre></left>
 746                 <right><value><t t-esc='receipt.change' /></value></right>
 747             </line>
 748             <br/>
 749
 750             <!-- Extra Payment Info -->
 751
 752             <t t-if='receipt.total_discount'>
 753                 <line>
 754                     <left>Discounts</left>
 755                     <right><value><t t-esc='receipt.total_discount'/></value></right>
 756                 </line>
 757             </t>
 758             <t t-if='taxincluded'>
 759                 <t t-foreach='receipt.tax_details' t-as='tax'>
 760                     <line>
 761                         <left><t t-esc='tax.name' /></left>
 762                         <right><value><t t-esc='tax.amount' /></value></right>
 763                     </line>
 764                 </t>
 765             </t>
 766
 767             <!-- Footer -->
 768             <t t-if='receipt.footer'>
 769                 <br/>
 770                 <pre><t t-esc='receipt.footer' /></pre>
 771                 <br/>
 772                 <br/>
 773             </t>
 774
 775             <br/>
 776             <div font='b'>
 777                 <div><t t-esc='receipt.name' /></div>
 778                 <div><t t-esc='receipt.date.localestring' /></div>
 779             </div>
 780
 781         </receipt>
 782     </t>
 783
 784     <t t-name="FullscreenPopupWidget">
 785         <div class="modal-dialog">
 786             <div class="popup popup-fullscreen">
 787                 <p class="message">Fullscreen Setup</p>
 788
 789                 <t t-if='widget.ismobile()'>
 790                     <p class="comment">
 791                         The best way to make the point of sale fullscreen on mobile
 792                         devices is to add the point of sale to your home screen. On
 793                         iPhone and iPad this is done by tapping <img src='/point_of_sale/static/src/img/ios-share-icon.png' />
 794                         and then <i>Add to Homescreen</i>
 795                     </p>
 796                     <p class='comment'>
 797                         This also works on Android with the Chrome Beta Browser, using the <i>Add to Homescreen</i> option
 798                         in the browser's menu.
 799                     </p>
 800                     <p class='comment'>
 801                         If you want to work in fullscreen just this time tap the <i>Go Fullscreen</i> button.
 802                     </p>
 803                 </t>
 804
 805                 <t t-if='!widget.ismobile()'>
 806                     <p class="comment">
 807                         The best way to make the point of sale fullscreen on desktop
 808                         and laptops is to launch your browser in kiosk mode. Please
 809                         refer to your browser's documentation for the specific
 810                         instructions.
 811                     </p>
 812                     <p class="comment">
 813                         If you want to work in fullscreen just this time, click the <i> Go Fullscreen</i> button.
 814                     </p>
 815                 </t>
 816
 817                 <div class="footer">
 818                     <div class="button fullscreen">
 819                         Go Fullscreen
 820                     </div>
 821                     <div class="button cancel">
 822                         Cancel
 823                     </div>
 824                 </div>
 825             </div>
 826         </div>
 827     </t>
 828
 829     <t t-name="ErrorInvoiceTransferPopupWidget">
 830         <div class="modal-dialog">
 831             <div class="popup popup-invoice">
 832                 <p class="message">The Order could not be sent to the server for invoicing. Invoices cannot be generated
 833                     in offline mode. Please check your internet connection and try again.</p>
 834                 <div class="footer">
 835                     <div class="button">
 836                         Ok
 837                     </div>
 838                 </div>
 839             </div>
 840         </div>
 841     </t>
 842
 843     <t t-name="ErrorPopupWidget">
 844         <div class="modal-dialog">
 845             <div class="popup popup-error">
 846                 <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
 847                 <p class="comment"><t t-esc=" widget.comment || '' "/></p>
 848                 <div class="footer">
 849                     <div class="button">
 850                         Ok
 851                     </div>
 852                 </div>
 853             </div>
 854         </div>
 855     </t>
 856
 857     <t t-name="ErrorTracebackPopupWidget">
 858         <div class="modal-dialog">
 859             <div class="popup popup-error">
 860                 <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
 861                 <p class="comment traceback"><t t-esc=" widget.comment || '' "/></p>
 862                 <div class="footer">
 863                     <div class="button">
 864                         Ok
 865                     </div>
 866                 </div>
 867             </div>
 868         </div>
 869     </t>
 870
 871     <t t-name="ErrorTracebackPopupWidget">
 872         <div class="modal-dialog">
 873             <div class="popup popup-error">
 874                 <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
 875                 <p class="comment traceback"><t t-esc=" widget.comment || '' "/></p>
 876                 <div class="footer">
 877                     <div class="button">
 878                         Ok
 879                     </div>
 880                 </div>
 881             </div>
 882         </div>
 883     </t>
 884
 885     <t t-name="ErrorBarcodePopupWidget">
 886         <div class="modal-dialog">
 887             <div class="popup popup-barcode">
 888                 <p class="message">Unknown Barcode
 889                     <br />
 890                     <span class='barcode'><t t-esc="widget.barcode" /></span>
 891                 </p>
 892                 <p class="comment">
 893                     The Point of Sale could not find any product, client, employee
 894                     or action associated with the scanned barcode.
 895                 </p>
 896                 <div class="footer">
 897                     <div class="button">
 898                         Ok
 899                     </div>
 900                 </div>
 901             </div>
 902         </div>
 903     </t>
 904
 905     <t t-name="ConfirmPopupWidget">
 906         <div class="modal-dialog">
 907             <div class="popup popup-confirm">
 908                 <p class="message"><t t-esc=" widget.message || 'Confirm ?' " /></p>
 909                 <p class="comment"><t t-esc=" widget.comment || '' "/></p>
 910                 <div class="footer">
 911                     <div class="button confirm">
 912                         Confirm
 913                     </div>
 914                     <div class="button cancel">
 915                         Cancel
 916                     </div>
 917                 </div>
 918             </div>
 919         </div>
 920     </t>
 921
 922     <t t-name="UnsentOrdersPopupWidget">
 923         <div class="modal-dialog">
 924             <div class="popup popup-unsent-orders">
 925                 <p class="message">Unsent Orders</p>
 926                 <t t-if='widget.pos.db.get_orders().length === 0'>
 927                     <p class='comment'>
 928                         There are no unsent orders
 929                     </p>
 930                 </t>
 931                 <t t-if='widget.pos.db.get_orders().length > 0'>
 932                     <p class='comment traceback'>
 933                         <t t-esc='JSON.stringify(widget.pos.db.get_orders(),null,2)' />
 934                     </p>
 935                 </t>
 936                 <div class="footer">
 937                     <div class="button confirm">
 938                         Ok
 939                     </div>
 940                 </div>
 941             </div>
 942         </div>
 943     </t>
 944
 945     <t t-name="Product">
 946         <span class='product' t-att-data-product-id="product.id">
 947             <div class="product-img">
 948                 <img t-att-src='image_url' />
 949                 <t t-if="!product.to_weight">
 950                     <span class="price-tag">
 951                         <t t-esc="widget.format_currency(product.price,'Product Price')"/>
 952                     </span>
 953                 </t>
 954                 <t t-if="product.to_weight">
 955                     <span class="price-tag">
 956                         <t t-esc="widget.format_currency(product.price,'Product Price')+'/Kg'"/>
 957                     </span>
 958                 </t>
 959             </div>
 960             <div class="product-name">
 961                 <t t-esc="product.display_name"/>
 962             </div>
 963         </span>
 964     </t>
 965
 966     <t t-name="Orderline">
 967         <li t-attf-class="orderline #{ line.selected ? 'selected' : '' }">
 968             <span class="product-name">
 969                 <t t-esc="line.get_product().display_name"/>
 970             </span>
 971             <span class="price">
 972                 <t t-esc="widget.format_currency(line.get_display_price())"/>
 973             </span>
 974             <ul class="info-list">
 975                 <t t-if="line.get_quantity_str() !== '1' || line.selected ">
 976                     <li class="info">
 977                         <em>
 978                             <t t-esc="line.get_quantity_str()" />
 979                         </em>
 980                         <t t-esc="line.get_unit().name" />
 981                         at
 982                         <t t-esc="widget.format_currency(line.get_unit_price(),'Product Price')" />
 983                         /
 984                         <t t-esc="line.get_unit().name" />
 985                     </li>
 986                 </t>
 987                 <t t-if="line.get_discount_str() !== '0'">
 988                     <li class="info">
 989                         With a
 990                         <em>
 991                             <t t-esc="line.get_discount_str()" />%
 992                         </em>
 993                         discount
 994                     </li>
 995                 </t>
 996             </ul>
 997         </li>
 998     </t>
 999
1000     <t t-name="OrderWidget">
1001         <div class="order-container">
1002             <div class="order-scroller touch-scrollable">
1003                 <div class="order">
1004                     <ul class="orderlines">
1005                         <t t-if="orderlines.length === 0">
1006                             <li class="orderline empty">
1007                                 Your shopping cart is empty
1008                             </li>
1009                         </t>
1010                     </ul>
1011                     <div class="summary clearfix">
1012                         <div t-attf-class="line #{orderlines.length === 0 ? 'empty' : ''}">
1013                             <div class='entry total'>
1014                                 <span class="label">Total: </span> <span class="value">0.00 €</span>
1015                                 <div class='subentry'>Taxes: <span class="value">0.00€</span></div>
1016                             </div>
1017                         </div>
1018                     </div>
1019                 </div>
1020             </div>
1021         </div>
1022     </t>
1023
1024
1025
1026     <t t-name="DebugWidget">
1027         <div class="debug-widget">
1028             <h1>Debug Window</h1>
1029             <div class="toggle">▾</div>
1030             <div class="content">
1031                 <p class="category">Electronic Scale</p>
1032                 <ul>
1033                     <li><input type="text" class="weight"></input></li>
1034                     <li class="button set_weight">Set Weight</li>
1035                     <li class="button reset_weight">Reset</li>
1036                 </ul>
1037
1038                 <p class="category">Barcode Scanner</p>
1039                 <ul>
1040                     <li><input type="text" class="ean"></input></li>
1041                     <li class="button custom_ean">Custom Ean13</li>
1042                     <li class="button admin_badge">Admin Badge</li>
1043                     <li class="button client_badge">Client Badge</li>
1044                     <li class="button soda_33cl">Soda 33cl</li>
1045                     <li class="button oranges_kg">3.141Kg Oranges</li>
1046                     <li class="button lemon_price">1.54€ Lemon</li>
1047                     <li class="button unknown_product">Unknown Product</li>
1048                     <li class="button invalid_ean">Invalid Ean</li>
1049                     <li class="button reference">Reference</li>
1050                 </ul>
1051
1052                 <p class="category">Unsent Orders</p>
1053                 <ul>
1054                     <li class="button show_orders">Show All Unsent Orders</li>
1055                     <li class="button delete_orders">Delete All Unsent Orders</li>
1056                 </ul>
1057
1058                 <p class="category">Hardware Status</p>
1059                 <ul>
1060                     <li class="status weighting">Weighting</li>
1061                 </ul>
1062                 <p class="category">Hardware Events</p>
1063                 <ul>
1064                     <li class="event open_cashbox">Open Cashbox</li>
1065                     <li class="event print_receipt">Print Receipt</li>
1066                     <li class="event scale_read">Read Weighting Scale</li>
1067                 </ul>
1068             </div>
1069         </div>
1070     </t>
1071
1072
1073     <t t-name="Paymentline">
1074         <div t-attf-class="paymentline #{line.selected ? 'selected' : ''}">
1075             <div class='paymentline-name'>
1076                 <t t-esc="line.name"/>
1077             </div>
1078             <input class='paymentline-input' type="number" step="0.01" t-att-value="line.get_amount_str()" />
1079             <span  class='paymentline-delete'>
1080                 <img src="/point_of_sale/static/src/img/search_reset.gif" />
1081             </span>
1082         </div>
1083     </t>
1084
1085     <t t-name="PaymentlineOld">
1086         <tr t-attf-class="paymentline #{line.selected ? 'selected' : ''}">
1087             <td class="paymentline-type">
1088                 <t t-esc="line.name"/>
1089             </td>
1090             <td class="paymentline-amount pos-right-align">
1091                 <input type="number" step="0.01" t-att-value="line.get_amount_str()" />
1092                 <span class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></span>
1093             </td>
1094         </tr>
1095     </t>
1096
1097     <t t-name="OrderButtonWidget">
1098         <span class="order-button select-order">
1099             <t t-if='widget.selected'>
1100                 <span class='order-sequence'>
1101                     <t t-esc='widget.order.sequence_number' />
1102                 </span>
1103                 <t t-if="widget.order.get_client()">
1104                     <i class='fa fa-user'/>
1105                 </t>
1106                 <t t-esc="(widget.order.get_client() ? widget.order.get_client_name()+' : ':'Unknown Customer: ') + moment(widget.order.get('creationDate')).format('LT')"/>
1107             </t>
1108             <t t-if='!widget.selected'>
1109                 <span class='order-sequence'>
1110                     <t t-esc='widget.order.sequence_number' />
1111                 </span>
1112             </t>
1113         </span>
1114     </t>
1115
1116     <t t-name="UsernameWidget">
1117         <span class="username">
1118             <t t-esc="widget.get_name()" />
1119         </span>
1120     </t>
1121
1122     <t t-name="PosTicket">
1123         <div class="pos-sale-ticket">
1124
1125             <div class="pos-center-align"><t t-esc="moment().format('L LT')"/> <t t-esc="order.get('name')"/></div>
1126             <br />
1127             <t t-esc="widget.pos.company.name"/><br />
1128             Phone: <t t-esc="widget.pos.company.phone || ''"/><br />
1129             User: <t t-esc="widget.pos.cashier ? widget.pos.cashier.name : widget.pos.user.name"/><br />
1130             Shop: <t t-esc="widget.pos.shop.name"/><br />
1131             <br />
1132             <t t-if="widget.pos.config.receipt_header">
1133                 <div style='text-align:center'>
1134                     <t t-esc="widget.pos.config.receipt_header" />
1135                 </div>
1136                 <br />
1137             </t>
1138             <table>
1139                 <colgroup>
1140                     <col width='50%' />
1141                     <col width='25%' />
1142                     <col width='25%' />
1143                 </colgroup>
1144                 <tr t-foreach="orderlines" t-as="orderline">
1145                     <td>
1146                         <t t-esc="orderline.get_product().display_name"/>
1147                          <t t-if="orderline.get_discount() > 0">
1148                             <div class="pos-disc-font">
1149                                 With a <t t-esc="orderline.get_discount()"/>% discount
1150                             </div>
1151                         </t>
1152                     </td>
1153                     <td class="pos-right-align">
1154                         <t t-esc="orderline.get_quantity_str_with_unit()"/>
1155                     </td>
1156                     <td class="pos-right-align">
1157                         <t t-esc="widget.format_currency(orderline.get_display_price())"/>
1158                     </td>
1159                 </tr>
1160             </table>
1161             <br />
1162             <table>
1163                 <tr>
1164                     <td>Subtotal:</td>
1165                     <td class="pos-right-align">
1166                         <t t-esc="widget.format_currency(order.getSubtotal())"/>
1167                     </td>
1168                 </tr>
1169                 <t t-foreach="order.getTaxDetails()" t-as="taxdetail">
1170                     <tr>
1171                         <td><t t-esc="taxdetail.name" /></td>
1172                         <td class="pos-right-align">
1173                             <t t-esc="widget.format_currency(taxdetail.amount)" />
1174                         </td>
1175                     </tr>
1176                 </t>
1177                 <tr>
1178                     <td>Discount:</td>
1179                     <td class="pos-right-align">
1180                         <t t-esc="widget.format_currency(order.getDiscountTotal())"/>
1181                     </td>
1182                 </tr>
1183                 <tr class="emph">
1184                     <td>Total:</td>
1185                     <td class="pos-right-align">
1186                         <t t-esc="widget.format_currency(order.getTotalTaxIncluded())"/>
1187                     </td>
1188                 </tr>
1189             </table>
1190             <br />
1191             <table>
1192                 <tr t-foreach="paymentlines" t-as="line">
1193                     <td>
1194                         <t t-esc="line.name"/>
1195                     </td>
1196                     <td class="pos-right-align">
1197                         <t t-esc="widget.format_currency(line.get_amount())"/>
1198                     </td>
1199                 </tr>
1200             </table>
1201             <br />
1202             <table>
1203                 <tr><td>Change:</td><td class="pos-right-align">
1204                     <t t-esc="widget.format_currency(order.getChange())"/>
1205                     </td></tr>
1206             </table>
1207             <t t-if="widget.pos.config.receipt_footer">
1208                 <br />
1209                 <div style='text-align:center'>
1210                     <t t-esc="widget.pos.config.receipt_footer" />
1211                 </div>
1212             </t>
1213         </div>
1214     </t>
1215
1216     <!-- Onscreen Keyboard :
1217          http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
1218     <t t-name="OnscreenKeyboardFull">
1219         <div class="keyboard_frame">
1220             <ul class="keyboard full_keyboard">
1221                 <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
1222                 <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
1223                 <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
1224                 <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
1225                 <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
1226                 <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
1227                 <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
1228                 <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
1229                 <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
1230                 <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
1231                 <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
1232                 <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
1233                 <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
1234                 <li class="delete lastitem">delete</li>
1235                 <li class="tab firstitem">tab</li>
1236                 <li class="letter">q</li>
1237                 <li class="letter">w</li>
1238                 <li class="letter">e</li>
1239                 <li class="letter">r</li>
1240                 <li class="letter">t</li>
1241                 <li class="letter">y</li>
1242                 <li class="letter">u</li>
1243                 <li class="letter">i</li>
1244                 <li class="letter">o</li>
1245                 <li class="letter">p</li>
1246                 <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
1247                 <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
1248                 <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
1249                 <li class="capslock firstitem">caps lock</li>
1250                 <li class="letter">a</li>
1251                 <li class="letter">s</li>
1252                 <li class="letter">d</li>
1253                 <li class="letter">f</li>
1254                 <li class="letter">g</li>
1255                 <li class="letter">h</li>
1256                 <li class="letter">j</li>
1257                 <li class="letter">k</li>
1258                 <li class="letter">l</li>
1259                 <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
1260                 <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
1261                 <li class="return lastitem">return</li>
1262                 <li class="left-shift firstitem">shift</li>
1263                 <li class="letter">z</li>
1264                 <li class="letter">x</li>
1265                 <li class="letter">c</li>
1266                 <li class="letter">v</li>
1267                 <li class="letter">b</li>
1268                 <li class="letter">n</li>
1269                 <li class="letter">m</li>
1270                 <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
1271                 <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
1272                 <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
1273                 <li class="right-shift lastitem">shift</li>
1274                 <li class="space firstitem lastitem">&amp;nbsp;</li>
1275             </ul>
1276             <p class="close_button">close</p>
1277         </div>
1278     </t>
1279
1280     <t t-name="OnscreenKeyboardSimple">
1281         <div class="keyboard_frame">
1282             <ul class="keyboard simple_keyboard">
1283                 <li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
1284                 <li class="symbol"><span class="off">w</span><span class="on">2</span></li>
1285                 <li class="symbol"><span class="off">e</span><span class="on">3</span></li>
1286                 <li class="symbol"><span class="off">r</span><span class="on">4</span></li>
1287                 <li class="symbol"><span class="off">t</span><span class="on">5</span></li>
1288                 <li class="symbol"><span class="off">y</span><span class="on">6</span></li>
1289                 <li class="symbol"><span class="off">u</span><span class="on">7</span></li>
1290                 <li class="symbol"><span class="off">i</span><span class="on">8</span></li>
1291                 <li class="symbol"><span class="off">o</span><span class="on">9</span></li>
1292                 <li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>
1293
1294                 <li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
1295                 <li class="symbol"><span class="off">s</span><span class="on">#</span></li>
1296                 <li class="symbol"><span class="off">d</span><span class="on">%</span></li>
1297                 <li class="symbol"><span class="off">f</span><span class="on">*</span></li>
1298                 <li class="symbol"><span class="off">g</span><span class="on">/</span></li>
1299                 <li class="symbol"><span class="off">h</span><span class="on">-</span></li>
1300                 <li class="symbol"><span class="off">j</span><span class="on">+</span></li>
1301                 <li class="symbol"><span class="off">k</span><span class="on">(</span></li>
1302                 <li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>
1303
1304                 <li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
1305                 <li class="symbol"><span class="off">x</span><span class="on">!</span></li>
1306                 <li class="symbol"><span class="off">c</span><span class="on">"</span></li>
1307                 <li class="symbol"><span class="off">v</span><span class="on">'</span></li>
1308                 <li class="symbol"><span class="off">b</span><span class="on">:</span></li>
1309                 <li class="symbol"><span class="off">n</span><span class="on">;</span></li>
1310                 <li class="symbol"><span class="off">m</span><span class="on">,</span></li>
1311                 <li class="delete lastitem">delete</li>
1312
1313                 <li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
1314                 <li class="space">&amp;nbsp;</li>
1315                 <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
1316                 <li class="return lastitem">return</li>
1317             </ul>
1318             <p class="close_button">close</p>
1319         </div>
1320     </t>
1321
1322 </templates>