templates/fos/parcels/receipt/receipt_g03_pdf_mobile.html.twig line 1

Open in your IDE?
  1. {% block stylesheets %}
  4.     <style>
  7.         h6 {
  8.             font-weight: bold;
  9.         }
  11.         h3 {
  12.             /*font-size: 20px;*/
  13.         }
  15.         h5, h3, h4, p {
  16.             padding: 0px;
  17.             font-family: "Amaranth", sans-serif;
  18.             background: #ffffff;
  19.         }
  21.         legend {
  22.             border: none;
  23.             padding: 5px;
  24.         }
  26.         .print-area h5, .print-area h3, .print-area h4 {
  27.             padding: 0px;
  28.             font-family: "Nova Flat", sans-serif;
  29.             background: #ffffff;
  30.             border: none;
  31.             margin: 0;
  32.         }
  34.         .print-area p {
  35.             font-size: 12px;
  36.             padding: 4px;
  37.             margin: 0px;
  38.             line-height: 10px;
  39.             border: none;
  40.         }
  42.         hr {
  43.             margin-top: 1px;
  44.             margin-bottom: 1px;
  45.             border-top: 2px dashed rgba(0, 0, 0, 0.99);
  46.         }
  48.         .print-area hr {
  49.             border-top: 1px dashed rgba(0, 0, 0, 0.99);
  50.         }
  52.         .print-area {
  53.             width: 28%;
  54.             background: white;
  55.             /*border: 1px dotted;*/
  56.             padding: 2%;
  57.             display: block;
  58.             /*background-color: firebrick;*/
  59.         }
  61.         .print-area table {
  62.             font-family: 'Fjord One', serif;
  64.         }
  67.         element.style {
  68.         }
  70.         fieldset {
  71.             display: block;
  72.             margin-left: 0px;
  73.             margin-right: 2px;
  74.             border-top: 1px dotted black;
  76.         }
  78.         .kkk fieldset {
  79.             float: right;
  80.             width: 40%;
  81.         }
  83.         .detail {
  84.             padding: 0px;
  85.             font-size: 11px;
  86.             border: none;
  87.         }
  89.         @media print {
  91.             .sf-toolbar, .sf-display-none, .sf-minitoolbar {
  92.                 display: none;
  93.             }
  95.             .print-area {
  96.                 display: block;
  97.             }
  99.             @page {
  100.                 margin: 0 !important;
  101.             }
  103.             html {
  104.                 margin: 0 !important;
  105.             }
  107.             body {
  108.                 margin: 0 !important;
  109.             }
  111.             .print-area {
  112.                 width: 100%;
  113.             }
  115.             .pro {
  116.                 display: none;
  117.             }
  119.             .sf-toolbar, .sf-toolbarreset, .sf-minitoolbar {
  120.                 display: none;
  121.             }
  123.             /*.page-break {display: block; page-break-before: always }*/
  124.             .page-break {
  125.                 page-break-before: avoid;
  126.             }
  128.             .page-break {
  129.                 page-break-after: always;
  130.             }
  132.             pre, blockquote {
  133.                 page-break-inside: avoid;
  134.             }
  137.         }
  139.         .parcel {
  140.             /*font-family: 'Big Shoulders Text', cursive;*/
  141.             margin-bottom: 10px;
  142.             /*margin-left: 10px;*/
  143.         }
  146.         .parcel h3, .parcel span {
  147.             font-family: 'Merriweather', serif;
  148.             margin-top: 15px;
  149.         }
  151.         .sender_receiver {
  153.         }
  155.         .destinations {
  156.             float: left;
  157.             width: auto;
  158.             padding: 0px;
  159.             font-family: 'Open Sans', sans-serif;
  160.             margin-bottom: 15px;
  161.         }
  163.         .destinations h4, .destinations b {
  164.             font-family: 'Merriweather', serif;
  165.         }
  167.         .destinations h3 {
  168.             margin-bottom: 10px;
  169.         }
  171.         .description {
  172.             font-size: 30px;
  173.             /*margin-left: 10px;*/
  174.         }
  176.         .all_parcels {
  177.             text-transform: uppercase;
  179.             /*-ms-transform: rotate(90deg);*/
  180.             /*-moz-transform: rotate(90deg);*/
  181.             /*-webkit-transform: rotate(90deg);*/
  182.             /*-o-transform: rotate(90deg);*/
  183.             margin-top: 115px;
  184.             width: 430px;
  185.             margin-left: -60px;
  186.         }
  188.         .payment button, .print, .payment a {
  189.             width: 150px;
  190.             border-radius: 30px;
  191.         }
  193.         .payment .cash {
  194.             float: right;
  195.         }
  197.         .payment .cash img {
  198.             height: 20px;
  199.         }
  202.         .dropdown-menu > li.kopie > a {
  203.             padding-left: 5px;
  204.         }
  206.         .dropdown-submenu {
  207.             position: relative;
  208.         }
  210.         .dropdown-submenu > .dropdown-menu {
  211.             top: 0;
  212.             left: 100%;
  213.             margin-top: -6px;
  214.             margin-left: -1px;
  215.             -webkit-border-radius: 0 6px 6px 6px;
  216.             -moz-border-radius: 0 6px 6px 6px;
  217.             border-radius: 0 6px 6px 6px;
  218.         }
  220.         .dropdown-submenu > a:after {
  221.             border-color: transparent transparent transparent #333;
  222.             border-style: solid;
  223.             border-width: 5px 0 5px 5px;
  224.             content: " ";
  225.             display: block;
  226.             float: right;
  227.             height: 0;
  228.             margin-right: -10px;
  229.             margin-top: 5px;
  230.             width: 0;
  231.         }
  233.         .dropdown-submenu:hover > a:after {
  234.             border-left-color: #555;
  235.         }
  237.         .dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  238.             text-decoration: underline;
  239.         }
  241.         @media (max-width: 767px) {
  243.             .navbar-nav {
  244.                 display: inline;
  245.             }
  247.             .navbar-default .navbar-brand {
  248.                 display: inline;
  249.             }
  251.             .navbar-default .navbar-toggle .icon-bar {
  252.                 background-color: #fff;
  253.             }
  255.             .navbar-default .navbar-nav .dropdown-menu > li > a {
  256.                 color: red;
  257.                 background-color: #ccc;
  258.                 border-radius: 4px;
  259.                 margin-top: 2px;
  260.             }
  262.             .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  263.                 color: #333;
  264.             }
  266.             .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  267.             .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  268.                 background-color: #ccc;
  269.             }
  271.             .navbar-nav .open .dropdown-menu {
  272.                 border-bottom: 1px solid white;
  273.                 border-radius: 0;
  274.             }
  276.             .dropdown-menu {
  277.                 padding-left: 10px;
  278.             }
  280.             .dropdown-menu .dropdown-menu {
  281.                 padding-left: 20px;
  282.             }
  284.             .dropdown-menu .dropdown-menu .dropdown-menu {
  285.                 padding-left: 30px;
  286.             }
  288.             li.dropdown.open {
  289.                 border: 0px solid red;
  290.             }
  292.         }
  294.         @media (min-width: 768px) {
  295.             ul.nav li:hover > ul.dropdown-menu {
  296.                 display: block;
  297.             }
  299.             #navbar {
  300.                 text-align: center;
  301.             }
  302.         }
  305.         .dropdown-submenu .dropdown-menu li {
  306.             font-size: 12px;
  307.         }
  309.         .invalid-feedback {
  310.             color: orangered;
  311.             font-size: 12px;
  312.         }
  314.         legend {
  315.             display: block;
  316.             max-width: 100%;
  317.             width: auto;
  318.             padding: 10px;
  319.             margin-bottom: 5px;
  320.             font-size: 12px;
  321.             line-height: 1px;
  322.             color: inherit;
  323.             white-space: normal;
  324.             border: 1px solid;
  325.             /*font-family: "Nova Flat", Helvetica, Arial, sans-serif;*/
  326.             font-family: "Amaranth", Monaco, Consolas, "Courier New", monospace;
  327.             font-weight: bolder;
  328.         }
  330.         fieldset {
  331.             display: block;
  332.             margin-left: 0px;
  333.             margin-right: 2px;
  334.             margin-top: 10px;
  335.             padding-left: 10px;
  336.             /*padding-top: 0.35em;
  337.             padding-bottom: 0.625em;
  338.             padding-left: 0.75em;
  339.             padding-right: 0.75em;*/
  340.             border-top: 1px dotted black;
  341.         }
  343.         .datagrid-cell {
  344.             text-transform: uppercase;
  345.         }
  347.         .datagrid-footer-inner {
  348.             font-weight: bolder;
  349.         }
  351.         .datagrid-footer-inner .datagrid-cell {
  352.             font-size: 20px;
  353.         }
  355.         .panel-footer {
  356.             text-align: center;
  357.         }
  360.         h6 {
  361.             font-weight: bold;
  362.         }
  364.         h3 {
  365.             /*font-size: 20px;*/
  366.         }
  368.         h5, h3, h4, p {
  369.             padding: 0px;
  370.             font-family: "Amaranth", sans-serif;
  371.             background: #ffffff;
  372.             border: 1px dotted #cccccc;
  373.         }
  375.         legend {
  376.             border: none;
  377.             padding: 5px;
  378.         }
  380.         .print-area h5, .print-area h3, .print-area h4 {
  381.             padding: 0px;
  382.             font-family: "Nova Flat", sans-serif;
  383.             background: #ffffff;
  384.             border: none;
  385.             margin: 0;
  386.         }
  388.         .print-area p {
  389.             font-size: 12px;
  390.             padding: 0px;
  391.             margin: 0px;
  392.             line-height: 10px;
  393.             border: none;
  394.         }
  396.         hr {
  397.             margin-top: 1px;
  398.             margin-bottom: 1px;
  399.             border-top: 2px dashed rgba(0, 0, 0, 0.99);
  400.         }
  402.         .print-area hr {
  403.             border-top: 1px dashed rgba(0, 0, 0, 0.99);
  404.         }
  406.         .print-area {
  407.             width: 28%;
  408.             background: white;
  409.             /*border: 1px dotted;*/
  410.             padding: 2%;
  411.             display: block;
  412.         }
  414.         .print-area table {
  415.             font-family: monospace, monospace;
  417.         }
  420.         element.style {
  421.         }
  423.         fieldset {
  424.             display: block;
  425.             margin-left: 0px;
  426.             margin-right: 2px;
  427.             /*border: 1px dashed black;*/
  428.             padding: 0px;
  429.         }
  431.         .detail {
  432.             padding: 0px;
  433.             font-size: 11px;
  434.             border: none;
  435.         }
  437.         @media print {
  439.             .print-area {
  440.                 display: block;
  441.             }
  443.             @page {
  444.                 margin: 0 !important;
  445.             }
  447.             html {
  448.                 margin: 0 !important;
  449.             }
  451.             body {
  452.                 margin: 0 !important;
  453.             }
  455.             .print-area {
  456.                 width: 100%;
  457.             }
  459.             .pro {
  460.                 display: none;
  461.             }
  463.             .sf-toolbar, .sf-toolbarreset, .sf-minitoolbar {
  464.                 display: none;
  465.             }
  466.         }
  468.         table {
  469.             border-collapse: collapse;
  470.         }
  471.     </style>
  472. {% endblock %}
  474. {% block body %}
  476.     <div class="print-area" id="print-area">
  477.         <div class="receipt-print" style="border: 1px solid black;">
  478.             <div align="center">
  479.                 <img id="img.base-64" style="height: 80px;" src="{{ 'data:image/jpg;base64,'~logoBase64 }}" alt=""/>
  480.             </div>
  481.             <h5 style="text-align: center; align-content: center">NENO COURIER SERVICES LTD</h5>
  483.             <p style="text-align: center; align-content: center; font-size: 10px">
  484.                 P.O BOX 660-60100 - EMBU <br/>
  485.                 TEL:{{ waybill.fromStation.stationName }}:{{ waybill.fromStation.phoneNumbers }}<br>
  486.                 {{ waybill.toStation.stationName }}: {{ waybill.toStation.phoneNumbers }} </p>
  487.             <p style="text-align: center;">----------------------------------------------</p>
  488.             <table style="width: 100%; font-size: 10px">
  489.                 <tr>
  490.                     <td align="right" style="width: 40%;">PIN:</td>
  491.                     <td>P051185384I</td>
  492.                 </tr>
  494.                 <tr>
  495.                     {% if transaction.pinNumber %}
  496.                         <td align="right">BUYERS PIN:</td>
  497.                         <td>{{ transaction.pinNumber | upper }}</td>
  498.                     {% endif %}
  499.                 </tr>
  500.             </table>
  501.             <div style="align-content: center; text-align: center; ">
  502.                 <p style="font-weight: bold; font-size: 10px; margin-bottom: 5px;">{{ receiptType }}</p>
  503.             </div>
  505.             <table style="width: 100%; border: 1px solid black; border-top: 1px dashed black;  padding: 5px;">
  506.                 <thead>
  507.                 <tr>
  508.                     <td colspan="2" style="text-align: center; padding: 0px;">
  509.                         <p style="text-align: center; font-size: 10px;">{{ transaction.createdAt | date }}</p>
  510.                        <p style="font-size: 10px;"> WAYBILL/RCP#{{ waybill.id }}</p>
  511.                     </td>
  512.                 </tr>
  513.                 <tr>
  514.                     <td colspan="2" style="text-align: center; padding: 0px;">
  516. {#                        <barcode code="{{ waybill.id }}" height="0.66" type="EAN128C" text="1"/>#}
  517. {#                        <br>#}
  518.                         <p style='font-weight:bolder; font-size: 20px; font-family: "Amaranth", sans-serif'>{{ waybill.id }}</p>
  519.                     </td>
  520.                 </tr>
  521.                 </thead>
  522.             </table>
  523.             <table style="width: 100%; border: 1px solid black; padding: 5px;">
  524.                 <thead>
  526.                 <tr>
  527.                     <th style="text-align: left;">
  528.                         <h6>Parcel Value</h6>
  529.                     </th>
  530.                     <th style="text-align: right;">
  531.                         <h6>{{ waybill.parcelValue | number_format }}</h6>
  532.                     </th>
  533.                 </tr>
  534.                 </thead>
  535.             </table>
  536.             <table style="width: 100%; border: 1px solid black; padding: 5px;">
  537.                 <thead>
  539.                 <tr>
  540.                     <th style="text-align: left;">
  541.                         <h6>FROM</h6>
  542.                     </th>
  543.                     <th style="text-align: right;">
  544.                         <h6>TO</h6>
  545.                     </th>
  546.                 </tr>
  547.                 </thead>
  548.                 <tbody>
  549.                 <tr>
  550.                     <td style="font-size: 10px;">
  551.                         <div style="">
  552.                             <p style="font-weight: normal;">{{ waybill.senderName | upper }}</p>
  553.                             <p>{{ waybill.senderPhoneNumber }}</p>
  554.                             <p>{{ waybill.fromStation.stationName | upper }}</p>
  555.                         </div>
  557.                     </td>
  558.                     <td style="text-align: right; font-size: 10px;">
  559.                         <div style="">
  560.                             <p style="font-weight: normal; ">{{ waybill.receiverName | upper }}</p>
  561.                             <p>{{ waybill.receiverPhoneNumber }}</p>
  562.                             <p>{{ waybill.toStation.stationName | upper }}</p><br>
  563.                         </div>
  564.                     </td>
  565.                 </tr>
  566.                 </tbody>
  567.             </table>
  570. {#            <div style="text-align: center; margin-bottom: 0px;">- - - - - - - - - - - - - - - - - - - - - - - - -</div>#}
  572.             <table style="margin-top: 1px; width:100%; margin-bottom: 0px; font-size: 10px;">
  573.                 {% for index, parcel in parcels %}
  574.                     <tr>
  575.                         <td><b style="font-size: 18px;">◾</b></td>
  576.                         <td colspan="2" style="font-size: 12px;">{{ parcel.description | slice(0,25) }} </td>
  577.                         <td align="right" style="font-size: 12px; padding-left: 5px; padding-right:5px;">1 x</td>
  578.                         <td align="right"
  579.                             style="font-size: 12px;">{{ (transaction.amount/waybill.percelCount) | number_format(2, '.', ',') }}</td>
  580.                     </tr>
  581.                 {% endfor %}
  582.             </table>
  583.             <div style="text-align: center; margin-bottom: 0px;">- - - - - - - - - - - - - - - - - - - - - - - - -</div>
  585.             <table style="text-align: center; width: 100%; align-content: center;">
  586.                 <tr style="border-bottom: 1px solid black;">
  587.                     <td align="left" style="font-size: 10px;">TOTAL TAX EXCL</td>
  588.                     <td align="right"
  589.                         style="font-weight: bolder;font-size: 10px;">{{ (transaction.grossAmount - transaction.taxAmount) | number_format(2, '.', ',') }}</td>
  590.                 </tr>
  591.                 <tr>
  592.                     <td align="left" style="font-size: 10px;">TAXES 16%</td>
  593.                     <td align="right"
  594.                         style="font-weight: bolder;font-size: 10px;">{{ transaction.taxAmount | number_format(2, '.', ',') }}</td>
  595.                 </tr>
  597.             </table>
  598.             <div style="text-align: center; margin-bottom: -2px;"></div>
  600.             <table style="text-align: center; width:100%; align-content: center;">
  601.                 <tr style="">
  602.                     <td align="left" style="font-weight: bold; font-size: 10px;">TOTAL AMOUNT</td>
  603.                     <td align="right"
  604.                         style="font-weight: bold; font-size: 10px;">{{ transaction.amount | number_format(2, '.', ',') }}</td>
  605.                 </tr>
  606.             </table>
  607. {#            <b style="text-align: center; margin-bottom: 0px;">- - - - - - - - - - - - - - - - - - - - - - - - -</b>#}
  609.             <div style="border: 1px dotted; margin: 3px; padding: 2px;">
  610.                 <table style="width: 100%;">
  611.                     {% if transaction.paymentMethod == 'MPESA' %}
  612.                         <tr>
  613.                             <td style="text-align: left; font-size: 10px;">PAID IN</td>
  614.                             <td style="text-align: right; font-size: 10px;"> {{ transaction.paymentMethod }}  [{{ mpesa.mpesa.transactionId }}]
  615.                                 by {{ mpesa.mpesa.firstName | capitalize }}</td>
  616.                         </tr>
  617.                     {% elseif transaction.paymentMethod == 'MPESA_CASH' %}
  618.                         <tr>
  619.                             <td style="text-align: left;font-size: 10px;">PAID IN</td>
  620.                             <td style="text-align: right;font-size: 10px;"> {{ transaction.paymentMethod }} [{{ mpesa.mpesa.transactionId }}]
  621.                                 by {{ mpesa.mpesa.firstName | capitalize }}</td>
  622.                         </tr>
  623.                     {% else %}
  624.                         <tr>
  625.                             <td style="text-align: left; font-size: 10px;">PAID IN</td>
  626.                             <td style="text-align: right; font-size: 10px;">CASH</td>
  627.                         </tr>
  629.                     {% endif %}
  631.                 </table>
  632.                 <table style="width: 100%;">
  633.                     <tr>
  634.                         <td style="text-align: left;font-size: 10px;">SERVED BY</td>
  635.                         <td style="text-align: right;font-size: 10px;">{{ by.preferredName | capitalize }}</td>
  636.                     </tr>
  637.                 </table>
  638.             </div>
  641.                 <p>
  643. {#                    <b style="text-align: center;">- - - - - - - - - - - - - - - - - - - - - - - - -</b>#}
  644.                     {% if qrcode is defined %}
  646.                         <table>
  647.                             <tr>
  648.                                 <td>
  649.                                     <img id="img.base-64" style="width: 100px; height: 100px;" src="{{ 'data:image/png;base64,'~qrcode }}" alt=""/>
  650.                                 </td>
  651.                                 <td>
  652.                                         <p style="width: 100%; font-weight: bold; font-size: 10px;">CONTROL UNIT </p>
  653.                                         <p>-------------------------</p>
  654.                                         <p style="font-size: 10px;"><b>SERIAL NUMBER</b></p>
  655. {#                                        <p style="font-size: 10px; font-weight: normal;">KRAMW011202207060805</p>#}
  656.                                         <p style="font-size: 10px; font-weight: normal;">KRAMW011202207061147</p>
  657.                                         <p style="font-size: 10px;"><b>INVOICE NUMBER</b></p>
  658.                                         <p style="font-size: 10px;font-weight: normal;">{{ timsInvoiceNumber }}</p>
  659.                                 </td>
  660.                             </tr>
  661.                         </table>
  664.                     {% endif %}
  666.                     <div style="text-align: center;">
  667.                         <p>
  668.                             <i>"<b>Thank you</b> for choosing <br> Neno Courier Services."</i>
  669.                         </p>
  670.                         <p><i>Have an awesome
  671.                                 {% set currentHour =  (waybill.createdAt | date('H')) %}
  674.                                 {% if currentHour > 0 and currentHour < 12 %}
  675.                                     day
  676.                                 {% elseif currentHour >= 12 and currentHour < 15 %}
  677.                                     afternoon
  678.                                 {% elseif currentHour >= 16 and currentHour < 23 %}
  679.                                     evening
  680.                                 {% endif %}
  682.                             </i></p>
  683.                     </div>
  685.                 </div>
  690.         {% for parcel in parcels %}
  691.             <div class="page-break" style="margin-top:0px;"></div>
  693.             <div style="border: 1px solid black;">
  695.                 <div style="text-align: center; margin-bottom: 1px;  margin-top:1px; border: 1px solid black;">
  696.                     <h3>NENO COURIER SERVICES</h3>
  697.                     <p style="text-align: center; align-content: center; ">P.O BOX 660-60100,
  698.                         Tel:{{ waybill.fromStation.stationName }}:
  699.                         <b style="font-family: 'Merriweather', serif;"> {{ waybill.fromStation.phoneNumbers }}</b>
  700.                         {{ waybill.toStation.stationName }}:
  701.                         <b>{{ waybill.toStation.phoneNumbers }}</b>
  702.                     </p>
  703.                     <h1 style="margin: 1px; padding: 0px;"><b style="font-weight: bold; font-family: serif;">{{ waybill.id }}</b></h1>
  705.                     <div style="text-align: center; margin-bottom: 1px;">
  706.                         <barcode code="{{ waybill.id }}" size="2" type="I25" text="1"/>
  707.                         <h4><b>{{ waybill.id }}</b></h4>
  708.                     </div>
  709.                     <p align="center">{{ transaction.createdAt | date }}</p>
  710.                     <h5>by:{{ waybill.createdBy.person.preferredName }}</h5>
  711.                     <hr>
  712.                 </div>
  714.                 <table rotate="90" style="padding-top:50px; border-collapse: collapse;">
  715.                     <thead>
  716.                     <tr>
  717.                         <th colspan="2">
  718.                             <div style="font-size: 45px;">
  719.                                 {{ waybill.toStation }} -
  720.                                 {% if waybill.fromStation.id < 10 %}
  721.                                     00{{ waybill.fromStation.id }}
  722.                                 {% elseif waybill.fromStation.id > 9 and waybill.fromStation.id < 100 %}
  723.                                     0{{ waybill.fromStation.id }}
  724.                                 {% else %}
  725.                                     {{ waybill.fromStation.id }}
  726.                                 {% endif %}
  727.                             </div>
  728.                         </th>
  729.                     </tr>
  730.                     <tr>
  731.                         <th colspan="2">
  732.                             <h3 style="width: 400px; font-weight: normal; ">
  733. {#                                {% set receiverP = waybill.receiverPhoneNumber | split(' ') %}#}
  734. {#                                {{ receiverP[0] ~ ' *** '~receiverP[2]  }}#}
  735.                                 {{ waybill.receiverPhoneNumber }}
  736.                                 <span>KES{{ transaction.amount }}</span>
  737.                             </h3>
  738.                         </th>
  739.                     </tr>
  740.                     </thead>
  741.                     <tbody>
  742.                     <tr style="border-bottom: 1px solid black;">
  743.                         <th style="border-bottom: 1px solid black;">
  744.                             <h6 style="text-align: left">FROM</h6>
  745.                         </th>
  746.                         <th style="border-bottom: 1px solid black;">
  747.                             <h6 style="text-align: left">TO</h6>
  748.                         </th>
  749.                     </tr>
  750.                     <tr>
  751.                         <td style="border-bottom: 1px solid black;">
  752.                             <div class="destinations">
  753.                                 <h4 style="font-weight: bold;">{{ waybill.senderName | upper }}</h4>
  754.                                 <h5>
  756.                                     {{ waybill.senderPhoneNumber }}
  757. {#                                    {% set senderP = waybill.senderPhoneNumber | split(' ') %}#}
  759. {#                                    {{ senderP[0] ~ ' *** '~senderP[2]  }}#}
  760.                                 </h5>
  761.                                 <h5>{{ waybill.fromStation.stationName }}</h5>
  762.                             </div>
  763.                         </td>
  764.                         <td style="border-bottom: 1px solid black;">
  765.                             <div class="destinations">
  766.                                 <h4 style="font-weight: bold;">{{ waybill.receiverName | upper }}</h4>
  767.                                 <h5>
  768.                                     {{ waybill.receiverPhoneNumber }}
  769. {#                                    {% set receiverP = waybill.receiverPhoneNumber | split(' ') %}#}
  771. {#                                    {{ receiverP[0] ~ ' *** '~receiverP[2]  }}#}
  772.                                 </h5>
  773.                                 <h5>{{ waybill.toStation.stationName }}</h5>
  774.                             </div>
  775.                         </td>
  776.                     </tr>
  777.                     <tr>
  778.                         <td colspan="2">
  779.                             <div class="description">
  780.                                 <div style="font-size: 25px;">
  782.                                     {{ parcel.description | slice(0, 70) }}
  783.                                     {% if parcel.description|length > 70 %}
  784.                                         ...
  785.                                     {% endif %}
  787.                                 </div>
  788.                                 <br>
  789.                             </div>
  790.                         </td>
  791.                     </tr>
  792.                     </tbody>
  793.                 </table>
  794.             </div>
  795.         {% endfor %}
  797.     </div>
  798. {% endblock %}