{%comment%} Mini Template for termal printer - customizable packing slip {%endcomment%}
<div class="wrapper" id="pack_slip_to_print">
<style>
  .ps_qtty {color: #000;}
</style>

<div style="position: relative; margin-top: 25px;margin:0;padding:0;">

  <table style="display:inline-block;border:3px solid black;padding:0;border-spacing:0;border-collapse:collapse;"
    width="385px">
    <tbody>
      <tr>
        <td>
          <table style="padding:0;border-spacing:0;border-collapse:collapse;" width="100%">
            <tbody>
              <tr><td style="border-bottom:1px solid black; text-align: center;" colspan="4"><b>{{ shop.name }}</b></td></tr>
              <tr>
                <td style="border-bottom:3px solid black;" colspan="2"><b>Order information</b></td>
                <td style="border-bottom:3px solid black;border-left:1px solid black;" colspan="2"><b>Shipping to</b></td>
              </tr>
              <tr>
                <td style="border-bottom:3px solid black;" colspan="2">
                  <p class="lead">Order Number: {{ order.name }}</p>
                  <p>Purchased: {{ order.created_at | date: "%B %e, %Y" }}</p>
                </td>
                <td style="border-bottom:3px solid black;border-left:1px solid black;" colspan="2">
                  {% if shipping_address != blank %}
                    {{ shipping_address.name }}
                    {% if shipping_address.company != blank %}
                      <br>
                      {{ shipping_address.company }}
                    {% endif %}
                    <br>
                    {{ shipping_address.address1 }}
                    {% if shipping_address.address2 != blank %}
                      <br>
                      {{ shipping_address.address2 }}
                    {% endif %}
                    {% if shipping_address.city_province_zip != blank %}
                      <br>
                      {{ shipping_address.city_province_zip }}
                    {% endif %}
                    <br>
                    {{ shipping_address.country }}
                    {% if shipping_address.phone != blank %}
                      <br>
                      {{ shipping_address.phone }}
                    {% endif %}
                  {% else %}
                    No shipping address
                  {% endif %}
                </td>
              </tr>
              <tr>
                <td style="text-align:left;vertical-align:top;" colspan="4">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th scope="col">SKU</th>
                        <th scope="col">Item name</th>
                        <th scope="col">Quantity</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% assign item_count = 1 %}
                      {% for line_item in line_items_in_shipment %}
                        <tr>
                          <td style="vertical-align:top;">{{ line_item.sku }}</th>
                          <td>{{ line_item.title }}</td>
                          <td style="text-align: right;"><span class="ps_qtty">{{ line_item.quantity }}</span></td>
                        </tr>
                        {% assign item_count = item_count | plus: 1 %}
                      {% endfor %}
                    </tbody>
                  </table>
                </td>
              </tr>
              <td style="text-align:left;vertical-align:top;" colspan="4">
                {%comment%} Placeholder for text at the end of the slip {%endcomment%}
              </td>
              <tr>
                <td style="font-size:10px; text-align: center;" width="385px" colspan="4">Thank you for shopping with us!</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<style>
.wrapper {
  width: 385px;
  margin: auto;
  font-family: "Noto Sans", sans-serif;
  font-weight: 250;
  page-break-after: always;
}
body { background: transparent; }
</style>
</div>