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     <t t-name="PosWidget">
   6     <div class="point-of-sale">
   7         <div id="topheader">
   8             <div id="branding">
   9                 <img src="/point_of_sale/static/src/img/logo.png" />
  10             </div>
  11             <div id="loggedas">
  12                 <span class="oe_pos_synch-notification"></span>
  13                 <button>Close</button>
  14             </div>
  15             <div id="rightheader">
  16                 <div id="order-selector">
  17                     <button id="neworder-button">+</button>
  18                     <ol id="orders"></ol>
  19                 </div>
  20             </div>
  21         </div>
  22         <div id="content">
  23
  24             <div id="leftpane">
  25                 <div id="placeholder-OrderWidget"></div>
  26                 <footer>
  27
  28                     <ul id="amounts">
  29                         <li>
  30                             Subtotal:
  31                             <t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/>
  32                             <span id="subtotal">0</span>
  33                             <t t-if="widget.currency.position === 'after'"  t-esc="widget.currency.symbol"/>
  34                         </li>
  35
  36                         <li>
  37                             Tax:
  38                             <t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/>
  39                             <span id="tax">0</span>
  40                             <t t-if="widget.currency.position === 'after'"  t-esc="widget.currency.symbol"/>
  41                         </li>
  42
  43                         <li>
  44                             Total:
  45                             <t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/>
  46                             <span id="total">0</span>
  47                             <t t-if="widget.currency.position === 'after'"  t-esc="widget.currency.symbol"/>
  48                         </li>
  49                     </ul>
  50
  51                     <div id="placeholder-PaypadWidget"></div>
  52                     <div id="placeholder-NumpadWidget"></div>
  53
  54                 </footer>
  55             </div>
  56             <div id="rightpane">
  57             </div>
  58         </div>
  59     </div>
  60     </t>
  61     <t t-name="OrderWidget">
  62         <div id="current-order">
  63             <table>
  64                 <thead>
  65                     <tr>
  66                         <td>Product</td>
  67                         <td>Price</td>
  68                         <td>Disc (%)</td>
  69                         <td>Qty</td>
  70                         <td>Total</td>
  71                     </tr>
  72                 </thead>
  73                 <tbody id="current-order-content"></tbody>
  74             </table>
  75         </div>
  76     </t>
  77     <t t-name="pos-synch-notification">
  78         <span>
  79         <a t-if="widget.nbr_pending &gt; 0" href="javascript:void(0)" class="oe_pos_synch-notification-button">
  80             <t t-esc="widget.nbr_pending"/> pending orders
  81         </a>
  82         </span>
  83     </t>
  84     <t t-name="pos-scan-warning">
  85         <div>The product could not be recognized. Please contact an employee.</div>
  86     </t>
  87     <t t-name="pos-close-warning">
  88         <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
  89     </t>
  90     <t t-name="PaypadWidget">
  91         <div id="paypad">
  92         </div>
  93     </t>
  94     <t t-name="NumpadWidget">
  95         <div id="numpad">
  96             <button class="input-button number-char">1</button>
  97             <button class="input-button number-char">2</button>
  98             <button class="input-button number-char">3</button>
  99             <button class="mode-button" data-mode='quantity'>Qty</button>
 100             <br />
 101             <button class="input-button number-char">4</button>
 102             <button class="input-button number-char">5</button>
 103             <button class="input-button number-char">6</button>
 104             <button class="mode-button" data-mode='discount'>Disc</button>
 105             <br />
 106             <button class="input-button number-char">7</button>
 107             <button class="input-button number-char">8</button>
 108             <button class="input-button number-char">9</button>
 109             <button class="mode-button" data-mode='list_price'>Price</button>
 110             <br />
 111             <button class="input-button" id="numpad-minus" >+/-</button>
 112             <button class="input-button number-char">0</button>
 113             <button class="input-button number-char">.</button>
 114             <button class="input-button" id="numpad-backspace">
 115                 <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
 116             </button>
 117             <br />
 118         </div>
 119     </t>
 120
 121     <!--   ************   SEARCH PRODUCT SCREEN   ************    -->
 122
 123     <t t-name="ProductCategoriesWidget">
 124         <header>
 125             <ol class="breadcrumb">
 126                 <li class="oe-pos-categories-list">
 127                     <a href="javascript:void(0)">
 128                         <img src="/point_of_sale/static/src/img/home.png" class="homeimg" />
 129                     </a>
 130                 </li>
 131                 <t t-foreach="breadcrumb" t-as="category">
 132                     <li class="oe-pos-categories-list">
 133                         <img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow" />
 134                         <a href="javascript:void(0)" t-att-data-category-id="category.id">
 135                             <t t-esc="category.name"/>
 136                         </a>
 137                     </li>
 138                 </t>
 139             </ol>
 140             <div class="searchbox">
 141                 <input placeholder="Search Products" />
 142                 <img class="search-clear" src="/point_of_sale/static/src/img/search_reset.gif" />
 143             </div>
 144         </header>
 145         <div id="categories">
 146             <ol>
 147                 <t t-foreach="categories" t-as="category">
 148                     <li class="oe-pos-categories-list">
 149                         <a href="javascript:void(0)" t-att-data-category-id="category.id" class="button">
 150                             <t t-esc="category.name"/>
 151                         </a>
 152                     </li>
 153                 </t>
 154             </ol>
 155         </div>
 156     </t>
 157     <t t-name="ProductListWidget">
 158         <ol id="products-screen-ol" class="product-list">
 159         </ol>
 160     </t>
 161     <t t-name="SearchProductScreenWidget">
 162         <div id="products-screen">
 163             <span class="placeholder-ProductCategoriesWidget" />
 164             <span class="placeholder-ProductListWidget" />
 165         </div>
 166     </t>
 167
 168     <!--   ************   PAYMENT SCREEN   ************    -->
 169
 170     <t t-name="PaymentScreenWidget">
 171         <div id="payment-screen" class="step-screen">
 172             <header><h2>Payment</h2></header>
 173             <div class="pos-step-container">
 174                 <div class="pos-payment-container">
 175                     <br />
 176                     <table>
 177                         <tr>
 178                             <td class="paymentline-type">Total:</td>
 179                             <td class="paymentline-amount pos-right-align">
 180                                 <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 181                                 <span id="payment-due-total"></span>
 182                                 <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 183                             </td>
 184                         </tr>
 185                     </table>
 186                     <table id="paymentlines">
 187                     </table>
 188                     <table>
 189                         <tr>
 190                             <td class="paymentline-type">Paid:</td>
 191                             <td class="paymentline-amount pos-right-align">
 192                                 <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 193                                 <span id="payment-paid-total"></span>
 194                                 <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 195                             </td>
 196                         </tr>
 197                         <tr>
 198                             <td class="paymentline-type">Change:</td>
 199                             <td class="paymentline-amount pos-right-align">
 200                                 <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 201                                 <span id="payment-remaining"></span>
 202                                 <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 203                             </td>
 204                         </tr>
 205                     </table>
 206                 </div>
 207                 <div class="pos-payment-buttons">
 208                     <button class="oe-back-to-products">
 209                         <img src="/web/static/src/img/icons/gtk-go-back.png"></img>
 210                         Back to Products</button>
 211                     <button id="validate-order">
 212                         <img src="/web/static/src/img/icons/gtk-apply.png"></img>
 213                         Validate</button>
 214                 </div>
 215             </div>
 216         </div>
 217     </t> <!-- pos-payment-screen -->
 218
 219     <!--   ************   RECEIPT SCREEN   ************    -->
 220
 221     <t t-name="ReceiptScreenWidget">
 222         <div id="receipt-screen" class="step-screen" >
 223             <header><h2>Receipt</h2></header>
 224             <div class="pos-step-container">
 225                 <div class="pos-receipt-container">
 226                 </div>
 227                 <div class='receipt-buttons'>
 228                         <button id="print-the-ticket">
 229                             Print</button>
 230                         <button id="pos-finish-order">Next Order</button>
 231                 </div>
 232             </div>
 233         </div>
 234     </t>
 235
 236
 237     <t t-name="WelcomeScreenWidget">
 238         <div class="welcome-screen step-screen">
 239             <header><h2>Welcome</h2></header>
 240             <img src="/point_of_sale/static/src/img/scan.png" />
 241             <p> Please scan an item or your member card </p>
 242         </div>
 243     </t>
 244
 245
 246     <t t-name="ScanProductScreenWidget">
 247         <div class="scan-product-screen step-screen">
 248             <header><h2>Please scan an item</h2></header>
 249             <img src="/point_of_sale/static/src/img/scan.png" />
 250         </div>
 251     </t>
 252
 253     <t t-name="ClientPaymentScreenWidget">
 254         <div class="scan-product-screen step-screen">
 255             <header><h2>Payment</h2></header>
 256             <img src="/point_of_sale/static/src/img/bancontact.png" />
 257             <p>Please insert your card in the reader and follow the instructions to complete
 258             your purchase</p>
 259         </div>
 260     </t>
 261
 262     <t t-name="ScaleInviteScreenWidget">
 263         <div class="scale-invite-screen step-screen">
 264             <header><h2>Please put your product on the scale</h2></header>
 265             <img src="/point_of_sale/static/src/img/scale.png" />
 266         </div>
 267     </t>
 268
 269     <t t-name="ScaleProductSelectionScreenWidget">
 270         <div class="scale-product-selection-screen">
 271             <span class="placeholder-ProductCategoriesWidget" />
 272             <span class="placeholder-ProductListWidget" />
 273         </div>
 274     </t>
 275
 276     <t t-name="HelpPopupWidget">
 277         <div class="modal-dialog">
 278             <div class="popup popup-help">
 279                 <p class="message">Please be patient, help is on the way</p>
 280                 <div class="footer">
 281                     <div class="button">
 282                         Cancel
 283                     </div>
 284                 </div>
 285             </div>
 286         </div>
 287     </t>
 288     <t t-name="ReceiptPopupWidget">
 289         <div class="modal-dialog">
 290             <div class="popup popup-help">
 291                 <p class="message">Welcome Mr. John Smith <br /> Choose your type of receipt:</p>
 292                 <div class = "button big-left receipt">
 293                     Ticket
 294                 </div>
 295                 <div class = "button big-right invoice">
 296                     Invoice
 297                 </div>
 298                 <div class="footer">
 299                 </div>
 300             </div>
 301         </div>
 302     </t>
 303
 304     <t t-name="ErrorPopupWidget">
 305         <div class="modal-dialog">
 306             <div class="popup popup-help">
 307                 <p class="message">The scanned product was not recognized<br /> Please wait, a cashier is on the way</p>
 308             </div>
 309         </div>
 310     </t>
 311
 312     <t t-name="ProductWidget">
 313         <li class='product'>
 314             <a href="#">
 315                 <div class="product-img">
 316
 317                     <img t-att-src="'data:image/gif;base64,'+ widget.model.get('product_image_small')" />
 318                     <t t-if="!widget.model.get('weight')">
 319                         <span class="price-tag">
 320                             <t t-esc="widget.format_currency(widget.model.get('list_price'))"/>
 321                         </span>
 322                     </t>
 323                     <t t-if="widget.model.get('weight')">
 324                         <span class="price-tag">
 325                             <t t-esc="widget.format_currency(widget.model.get('list_price'))+'/Kg'"/>
 326                         </span>
 327                         <span class="price-subtag">
 328                             <t t-esc="widget.format_currency(widget.model.get('list_price') * widget.model.get('weight'))"/>
 329                         </span>
 330                     </t>
 331                 </div>
 332                 <div class="product-name">
 333                     <t t-esc="widget.model.get('name')"/>
 334                 </div>
 335             </a>
 336         </li>
 337     </t>
 338     <t t-name="OrderlineWidget">
 339         <tr>
 340             <td>
 341                 <t t-esc="name"/>
 342             </td>
 343             <td>
 344                 <t t-esc="widget.format_currency(widget.model.get('list_price'))"/>
 345             </td>
 346             <td>
 347                 <t t-js="c">
 348                     console.log(c);
 349                 </t>
 350                 <t t-esc="widget.model.get('discount').toFixed(2)"/>
 351             </td>
 352             <td>
 353                 <t t-if="widget.model.get('weighted')">
 354                     <t t-esc="Math.round(widget.model.get('quantity')*100)/100+' Kg'"/>
 355                 </t>
 356                 <t t-if="!widget.model.get('weighted')">
 357                     <t t-esc="Math.round(widget.model.get('quantity')*100)/100"/>
 358                 </t>
 359             </td>
 360             <td>
 361                 <t t-esc="widget.format_currency(widget.model.get('list_price') * (1 - widget.model.get('discount')/100) * widget.model.get('quantity'))"/>
 362             </td>
 363         </tr>
 364     </t>
 365
 366     <t t-name="pos-paymentline-template">
 367         <td class="paymentline-type">
 368             <t t-esc="name"/>
 369         </td>
 370         <td class="paymentline-amount pos-right-align">
 371             <input type="text" t-att-value="amount.toFixed(2)" />
 372             <a href='javascript:void(0)' class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></a>
 373         </td>
 374     </t>
 375
 376     <t t-name="PaymentButtonWidget">
 377         <button class="payment-button" t-att-account-journal-id="widget.id">
 378             <t t-esc="widget.name"/>
 379         </button>
 380         <br />
 381     </t>
 382
 383     <t t-name="pos-order-selector-button-template">
 384         <button class="select-order"><t t-esc="widget.order.get('creationDate').toString('t')"/></button>
 385     </t>
 386     <t t-name="pos-ticket">
 387         <div class="pos-sale-ticket">
 388             <div class="pos-right-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
 389                 Date.CultureInfo.formatPatterns.longTime)"/></div>
 390             <br />
 391             <t t-esc="widget.company.name"/><br />
 392             Phone: <t t-esc="widget.company.phone || ''"/><br />
 393             User: <t t-esc="widget.user.name"/><br />
 394             Shop: <t t-esc="widget.shop_obj.name"/><br />
 395             <br />
 396             <table>
 397                 <tr t-foreach="widget.currentOrderLines.toArray()" t-as="order">
 398                     <td>
 399                         <t t-esc="order.get('name')"/>
 400                     </td>
 401                     <td class="pos-right-align">
 402                         <t t-esc="order.get('quantity').toFixed(0)"/>
 403                     </td>
 404                     <td class="pos-right-align">
 405                         <t t-esc="format_amount((order.get('list_price') * (1 - order.get('discount')/100) * order.get('quantity')).toFixed(2))"/>
 406                     </td>
 407                 </tr>
 408             </table>
 409             <br />
 410             <table>
 411                 <tr><td>Tax:</td><td class="pos-right-align">
 412                     <t t-esc="format_amount(widget.currentOrder.getTax().toFixed(2))"/>
 413                     </td></tr>
 414                 <tr><td>Total:</td><td class="pos-right-align">
 415                     <t t-esc="format_amount(widget.currentOrder.getTotal().toFixed(2))"/>
 416                     </td></tr>
 417             </table>
 418             <br />
 419             <table>
 420                 <tr t-foreach="widget.currentPaymentLines.toArray()" t-as="pline">
 421                     <td>
 422                         <t t-esc="pline.get('journal_id')[1]"/>
 423                     </td>
 424                     <td class="pos-right-align">
 425                         <t t-esc="format_amount((pline.getAmount()).toFixed(2))"/>
 426                     </td>
 427                 </tr>
 428             </table>
 429             <br />
 430             <table>
 431                 <tr><td>Change:</td><td class="pos-right-align">
 432                     <t t-esc="format_amount((widget.currentOrder.getPaidTotal() - widget.currentOrder.getTotal()).toFixed(2))"/>
 433                     </td></tr>
 434             </table>
 435         </div>
 436     </t>
 437     <t t-name="ActionBarWidget">
 438         <div class="pos-actionbar">
 439             <div class="pos-actionbar-left-pane">
 440                 <div class="button help-button">
 441                     <div class='icon'>
 442                         <img src="/point_of_sale/static/src/img/icons/png48/help.png" />
 443                         <div class='iconlabel'>Help</div>
 444                     </div>
 445                 </div>
 446                 <div class="button logout-button">
 447                     <div class='icon'>
 448                         <img src="/point_of_sale/static/src/img/icons/png48/system-log-out.png" />
 449                         <div class='iconlabel'>Exit</div>
 450                     </div>
 451                 </div>
 452                 <p class="total">
 453                     Total: <span class="value"> 0 </span>€
 454                 </p>
 455             </div>
 456             <ul class="pos-actionbar-button-list">
 457                 <!-- <li class="button">BUTTOOON</li>
 458                 <li class="button">JEEENKIINS</li>
 459                 <li class="button rightalign">ARGH</li> -->
 460             </ul>
 461         </div>
 462     </t>
 463
 464     <t t-name="pos-action-button">
 465         <li t-att-class=" 'button '+ (widget.rightalign  ? 'rightalign ' : '')">
 466             <div class='label'>
 467                 <t t-esc="widget.label" />
 468             </div>
 469         </li>
 470     </t>
 471     <t t-name="pos-action-button-with-icon">
 472         <li t-att-class=" 'button '+ (widget.rightalign  ? 'rightalign ' : '')">
 473             <div class='icon'>
 474                 <img t-att-src="widget.icon" />
 475                 <div class='iconlabel'><t t-esc="widget.label" /></div>
 476             </div>
 477         </li>
 478     </t>
 479     <!-- Onscreen Keyboard :
 480          http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
 481     <t t-name="pos-onscreen-keyboard-full-template">
 482         <div class="keyboard_frame">
 483             <ul class="keyboard full_keyboard">
 484                 <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
 485                 <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
 486                 <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
 487                 <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
 488                 <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
 489                 <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
 490                 <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
 491                 <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
 492                 <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
 493                 <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
 494                 <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
 495                 <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
 496                 <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
 497                 <li class="delete lastitem">delete</li>
 498                 <li class="tab firstitem">tab</li>
 499                 <li class="letter">q</li>
 500                 <li class="letter">w</li>
 501                 <li class="letter">e</li>
 502                 <li class="letter">r</li>
 503                 <li class="letter">t</li>
 504                 <li class="letter">y</li>
 505                 <li class="letter">u</li>
 506                 <li class="letter">i</li>
 507                 <li class="letter">o</li>
 508                 <li class="letter">p</li>
 509                 <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
 510                 <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
 511                 <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
 512                 <li class="capslock firstitem">caps lock</li>
 513                 <li class="letter">a</li>
 514                 <li class="letter">s</li>
 515                 <li class="letter">d</li>
 516                 <li class="letter">f</li>
 517                 <li class="letter">g</li>
 518                 <li class="letter">h</li>
 519                 <li class="letter">j</li>
 520                 <li class="letter">k</li>
 521                 <li class="letter">l</li>
 522                 <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
 523                 <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
 524                 <li class="return lastitem">return</li>
 525                 <li class="left-shift firstitem">shift</li>
 526                 <li class="letter">z</li>
 527                 <li class="letter">x</li>
 528                 <li class="letter">c</li>
 529                 <li class="letter">v</li>
 530                 <li class="letter">b</li>
 531                 <li class="letter">n</li>
 532                 <li class="letter">m</li>
 533                 <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
 534                 <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
 535                 <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
 536                 <li class="right-shift lastitem">shift</li>
 537                 <li class="space firstitem lastitem">&amp;nbsp;</li>
 538             </ul>
 539             <p class="close_button">close</p>
 540         </div>
 541     </t>
 542     <t t-name="pos-onscreen-keyboard-simple-template">
 543         <div class="keyboard_frame">
 544             <ul class="keyboard simple_keyboard">
 545                 <li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
 546                 <li class="symbol"><span class="off">w</span><span class="on">2</span></li>
 547                 <li class="symbol"><span class="off">e</span><span class="on">3</span></li>
 548                 <li class="symbol"><span class="off">r</span><span class="on">4</span></li>
 549                 <li class="symbol"><span class="off">t</span><span class="on">5</span></li>
 550                 <li class="symbol"><span class="off">y</span><span class="on">6</span></li>
 551                 <li class="symbol"><span class="off">u</span><span class="on">7</span></li>
 552                 <li class="symbol"><span class="off">i</span><span class="on">8</span></li>
 553                 <li class="symbol"><span class="off">o</span><span class="on">9</span></li>
 554                 <li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>
 555
 556                 <li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
 557                 <li class="symbol"><span class="off">s</span><span class="on">#</span></li>
 558                 <li class="symbol"><span class="off">d</span><span class="on">%</span></li>
 559                 <li class="symbol"><span class="off">f</span><span class="on">*</span></li>
 560                 <li class="symbol"><span class="off">g</span><span class="on">/</span></li>
 561                 <li class="symbol"><span class="off">h</span><span class="on">-</span></li>
 562                 <li class="symbol"><span class="off">j</span><span class="on">+</span></li>
 563                 <li class="symbol"><span class="off">k</span><span class="on">(</span></li>
 564                 <li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>
 565
 566                 <li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
 567                 <li class="symbol"><span class="off">x</span><span class="on">!</span></li>
 568                 <li class="symbol"><span class="off">c</span><span class="on">"</span></li>
 569                 <li class="symbol"><span class="off">v</span><span class="on">'</span></li>
 570                 <li class="symbol"><span class="off">b</span><span class="on">:</span></li>
 571                 <li class="symbol"><span class="off">n</span><span class="on">;</span></li>
 572                 <li class="symbol"><span class="off">m</span><span class="on">,</span></li>
 573                 <li class="delete lastitem">delete</li>
 574
 575                 <li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
 576                 <li class="space">&amp;nbsp;</li>
 577                 <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
 578                 <li class="return lastitem">return</li>
 579             </ul>
 580             <p class="close_button">close</p>
 581         </div>
 582     </t>
 583 </templates>