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