# Для воронок

### 1. Товарний чек

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](https://3026330704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXpkXXVQNdriuGMnogYNZ%2Fuploads%2FPipIB1dxQ7694kIEj6Rc%2F1.png?alt=media\&token=d9963a14-3e51-43bc-84d4-41f51ac08a1c)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Воронки

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Invoice</title>
</head>
<body>

<div class="container">

  <table class="width100">
    <tbody>
    <tr>
      <td class="logo-wrapper" valign="top">
          <img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="width: 200px;" alt="">
      </td>
      <td valign="top">
        <span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
        <span style="background-color: yellow">test@ukr.net</span><br />
      </td>
      <td valign="top">
        <span style="background-color: yellow">тел.: +38(050)000-00-00</span><br />
        <span style="background-color: yellow">тел.: +38(095)000-00-00</span><br />
        <span style="background-color: yellow">тел.: +38(097)000-00-00</span><br />
      </td>
    </tr>
    </tbody>
  </table>
  
  <br /><br /><br />

  <table class="width100">
    <tbody>
    <tr>
      <td valign="top" class="label" style="width:50%">
          <span style="background-color: yellow">Постачальник: Company Name</span><br />
          <span style="background-color: yellow">ФОП Тест А.А.</span><br />
          <span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
          <span style="background-color: yellow">тел.: +38(050)000-00-00</span><br />
      </td>
      <td valign="top" class="label">
          Одержувач: {{ model.contact_name }}<br />
          тел.: {{ model.contact_phone }}<br />
          {% if model.contact_email %}
            email: {{ model.contact_email }}
          {% endif %}
      </td>
    </tr>
    </tbody>
  </table>
  <br />

  <p class="big-text text-center" style="margin-bottom: 10px">
    {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}
    
    Товарний чек №{{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
  </p>
  <table class="table-products width100 border">
    <tbody>
        
    <tr>
      <th class="text-center">№</th>
      <th class="name-col">Назва товару</th>
      <th>Од.</th>
      <th>Кількість</th>
      <th>Ціна</th>
      <th>Сума</th>
    </tr>

    {% for key, product in model.products %}
    <tr>
      <td class="text-center">{{key + 1}}</td>
      <td style="width:50%">{{ product.name }}</td>
      <td class="text-center">шт</td>
      <td class="text-center">{{ product.quantity }}</td>
      <td class="text-right">{{ product.price|format_currency('UAH', locale='uk') }}</td>
      <td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</td>
    </tr>
    {% endfor %}
    
  </table>
  <table style="width: 100%">
        <tr>
            <td align="right">
                <table class="table-sum">
                    <tr>
                        <td><strong>Всього:</br>БЕЗ ПДВ</strong></td>
                        <td class="text-right" style="position: relative; top: -8px;">{{
                            model.products_sum|number_format(2, '.', ' ') }} грн.
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <br/><br/><br/>
    <table>
        <tr>
            <td>
                Всього найменувань: {{ model.products|length }} на суму
                <strong>{{ model.products_sum|number_format(2, '.', ' ') }}</strong> грн.
            </td>
        </tr>
         <td style="width: 50%">Дата: <span class="label underline">{{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.</span>    </td>
      <td>Підпис постачальника: &nbsp;&nbsp;&nbsp; ____________________</td>
      <td></td>
    </tr>
    </table>
 
</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }
  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }
  
  .underline {
      text-decoration: underline;
      font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }
  
  .width100 {
      width: 100%;
  }
  
  .width50 {
      width: 50%;
  }

  table {
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table th {
    background: #d4d4d4;
  }

  table.border td,
  table.border th {
    border: 1px solid black;
  }
  
  table.table-products {
      border: solid 2px black;
  }

  table.table-products th {
    padding: 20px 5px;
  }
  table.table-products td {
    padding: 5px;
  }
  
  table.table-sum {
      margin-top: 7px;
  }
  
  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

</style>
</html>
```

{% endtab %}
{% endtabs %}

### 2. Товарний чек №2

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](https://3026330704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXpkXXVQNdriuGMnogYNZ%2Fuploads%2FRgiYQcecZb6GAooY2Xzx%2F2.png?alt=media\&token=8c395baa-3865-43ae-9930-5b2329e1f92c)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Воронки

{% code fullWidth="true" %}

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Invoice</title>
</head>
<body>

<div class="container">

  <table>
    <tbody>
    <tr>
      <td>
        <img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="width: 180px;" alt="">
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span style="background-color: yellow">Company Name</span>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
       <span style="background-color: yellow">email: test@ukr.net</span>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px;">
        <span style="background-color: yellow">тел.: +38(050)000-00-00</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  <table style="padding-bottom: 10px; margin-bottom: 10px;">
    <tbody>
    <tr>
      <td style="padding: 10px 5px;">
        <strong>Покупець:</strong> {{ model.contact_name }}

        {% if model.contact_phone %}
        {{ model.contact_phone }}
        {% endif %}

      </td>
    </tr>

    <tr>
      <td style="padding: 5px 5px 10px;">
        <strong>Менеджер:</strong> {{ model.manager }}
        <span style="background-color: yellow">моб/viber (095) 111-11-11</span>
      </td>
    </tr>
    </tbody>
  </table>

  <br />

  <p class="text-center" style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
    {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}

    Накладна №{{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
  </p>

  <table class="table-products width100 border">
    <tbody>

    <tr>
      <th class="text-center">№</th>
      <th class="name-col">Найменування</th>
      <th>Кіл-сть</th>
      <th>Од.</th>
      <th>Ціна</th>
      <th>Сума</th>
    </tr>

    {% for key, product in model.products %}
    <tr>
      <td class="text-center" style="font-size: 12px;"><strong>{{key + 1}}</strong></td>
      <td style="width:50%; font-size: 12px;">{{ product.name }}</td>
      <td class="text-center" style="font-size: 12px;">{{ product.quantity }}</td>
      <td class="text-center" style="font-size: 12px;">{{ product.unit_type }}</td>
      <td class="text-right" style="font-size: 12px;">{{ product.price|format_currency('UAH', locale='uk') }}</td>
      <td class="text-right" style="font-size: 12px;">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</td>
    </tr>
    {% endfor %}

  </table>
<table style="width: 100%">
        <tr>
            <td align="right">
                <table class="table-sum">
                    <tr>
                        <td><strong>Всього:</br>БЕЗ ПДВ</strong></td>
                        <td class="text-right" style="position: relative; top: -8px;">{{
                             model.products_sum|format_currency('UAH', locale='uk') }}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <br/><br/><br/>
<table>
        <tr>
            <td>
                <strong>Всього найменувань {{ model.products|length }}, на суму {{
                    model.products_sum|format_currency('UAH', locale='uk') }}</strong>
            </td>
        </tr>
    </table>

    <br/>

    <table>
        <tr>
            <td>
                <p>
                        {% set gtc = model.products_sum|round(0, 'floor') %}
                        {% set gtr = ((model.products_sum - gtc) * 100)|round(0, 'floor') %}
                        <strong>{{ ((gtc|format_number(style="spellout", locale="uk"))|capitalize) }}
                        {% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривень' : (gtc % 10 == 1) ?
                        'гривня' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривні' : 'гривень' %}
                        {{ currencySuffix }}
                        {{ (gtr < 10 ? '0' ~ gtr : gtr) }}
                        {% set centsSuffix = (gtr >= 11 and gtr <= 14) ? 'копійок' : (gtr % 10 == 1) ?
                        'копійка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копійки' : 'копійок' %}
                        {{ centsSuffix }}
                        </strong>
                </p>
        </tr>
    </table>
  
  <br />

  <table class="width100" style="padding-bottom: 30px; margin-bottom: 30px;">
    <tbody>
    <tr style="font-size: 12px;">
      <td>Продавець</td>
      <td style="border-bottom: 1px solid black;"></td>
      <td style="background-color: yellow">Тест Тестов Тестовенко</td>
    </tr>
    <tr>
      <td style="padding: 5px;"></td>
      <td class="text-center" style="padding: 5px;">Підпис</td>
      <td style="padding: 5px;"></td>
    </tr>

    </tbody>
  </table>

  <br />

  <table class="width100" style="padding-bottom: 10px; margin-bottom: 10px;">
    <tr>
      <td class="text-center" style="font-size: 12px;">
        Дякуємо за замовлення!
      </td>
    </tr>
    <tr>
      <td class="text-center" style="font-size: 12px;">
        Нам дуже важливо щоб ви були задоволені нашими виробами та сервісом
      </td>
    </tr>
    <tr>
      <td class="text-center" style="padding: 5px; font-size: 12px;">
        По будь-якому запитанню ви можете написати нам в вайбер або телеграм:
      </td>
    </tr>
  </table>

  <table class="width100">
    <tbody>
    <tr>
      <td class="text-center" style="width: 50%; font-size: 12px;">Telegram</td>
      <td class="text-center" style="width: 50%; font-size: 12px;">Viber</td>
    </tr>
    <tr>
      <td class="text-center" style="width: 50%;">
          
        <img src="https://blog.keycrm.app/keycrm/qr/keycrm-telegram-qr.png" style="width: 150px;" alt="">
        
      </td>

      <td class="text-center" style="width: 50%; padding: 5px;">
    
        <img src="https://blog.keycrm.app/keycrm/qr/keycrm-viber-qr.png" style="width: 150px;" alt="">
          
      </td>
    </tr>

    </tbody>
  </table>

</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }
  body {
    font-size: 12px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 14px;
  }

  .width100 {
    width: 100%;
  }

  table {
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table.border td,
  table.border th {
    border-bottom: 1px solid black;
  }

  table.table-products {
    /*border: solid 2px black;*/
  }

  table.table-products th {
    padding: 5px 5px;
  }
  table.table-products td {
    padding: 5px 5px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

</style>
</html>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### 3. Рахунок на оплату

{% tabs %}
{% tab title="Зовнішній вигляд" %}
![](https://3026330704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXpkXXVQNdriuGMnogYNZ%2Fuploads%2FezMfq4axqXJnpMPfbBeF%2F3.png?alt=media\&token=dc0351fe-ecd6-49c3-bca9-424c8bcade86)
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Воронки

```
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Invoice</title>
</head>
<body>

<div class="container">

    <table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
        <tbody>
        <tr>
            <td style="font-size: 20px; font-weight: bold; width: 90%">
                {% set mnths =
                ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня']
                %}

                Рахунок на оплату № {{ model.title }} від {{ model.created_at|date("j") }} {{
                mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
            </td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
            <td valign="top">
                <span style="text-decoration: underline">Постачальник:</span>
            </td>
            <td valign="top" style="padding-bottom: 7px;">
                <strong style="background-color: yellow">ТОВ "Company Name"</strong>
                <div style="padding-left: 15px; font-size: 90%;">
                    <span style="background-color: yellow">адреса м.Київ вул. Хрещатик, 1, АТ КБ "ПРИВАТБАНК" № рахунку: UA111111111111, код ЄДРПОУ 1111111. Директор Тест Тестов Тестовенко</span><br/>
            </td>
        </tr>
        <tr>
            <td valign="top">
                <span style="text-decoration: underline">Покупець:</span>
            </td>
            <td valign="top" style="padding-bottom: 7px;">
                <strong>{{ model.contact_name }}</strong>
                <div style="padding-left: 15px; font-size: 90%;">
                    {% if model.contact_phone %}
                    {{ model.contact_phone }},
                    {% endif %}
                    {% if model.contact_email %}
                    {{ model.contact_email }}
                    {% endif %}
                </div>
            </td>
        </tr>
        <tr>
        <tr>
            <td valign="top">
                <span style="text-decoration: underline">Предмет:</span>
            </td>
            <td valign="top" style="padding-bottom: 7px;">
                <div style="padding-left: 15px; font-size: 90%;">
                    <span>Постачальник зобов’язується поставити і передати у власність Покупця товар, що вказаний в цьому Рахунку разом з товаросупровідною документацією, а Покупець зобов’язується прийняти і оплатити його з урахуванням цін вказаних у цьому Рахунку. </span><br/>
            </td>
        </tr>
        <tr>
            <td valign="top">
                <span style="text-decoration: underline">Термін:</span>
            </td>
            <td valign="top" style="padding-bottom: 7px;">
                <span>не пізніше 40 днів від дати здійснення попередньої оплати за товар</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                <span style="text-decoration: underline">Договір:</span>
            </td>
            <td valign="top" style="padding-bottom: 7px;">
                <span>Договору Поставки № 11-2023-11 від 28.11.2023 року</span>
            </td>
        </tr>
        </tbody>
    </table>

    <br/>

    <table class="table-products width100 border">
        <tbody>

        <tr>
            <th class="text-center">№</th>
            <th>Артикул</th>
            <th class="name-col">Назва товару</th>
            <th>Кількість</th>
            <th>Ціна</th>
            <th>Сума</th>
        </tr>

        {% for key, product in model.products %}
        <tr>
            <td class="text-center">{{key + 1}}</td>
            <td class="text-center">{{ product.sku }}</td>
            <td style="width:50%">{{ product.name }}</td>
            <td class="text-center">{{ product.quantity }} {{ product.unit_type }}</td>
            <td class="text-right">{{ product.price|format_currency('UAH', locale='uk') }}</td>
            <td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    <table class="width100">
        <tr>
            <td align="right">
                <table class="table-sum">
                    <tr>
                        <td><strong>ПДВ:</strong></td>
                        <td class="text-right">{{ (model.products_sum * 0.2)|format_currency('UAH', locale='uk') }}</td>
                    </tr>
                    <tr>
                        <td><strong>Разом:</strong></td>
                        <td class="text-right">{{ model.products_sum|format_currency('UAH', locale='uk') }}</td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>

    <br/>

    <table>
        <tr>
            <td>
                <strong>Всього найменувань {{ model.products|length }}, на суму {{
                    model.products_sum|format_currency('UAH', locale='uk') }}</strong>
            </td>
        </tr>
    </table>

    <br/>

    <table>
        <tr>
            <td>
                <p>
                        {% set gtc = model.products_sum|round(0, 'floor') %}
                        {% set gtr = ((model.products_sum - gtc) * 100)|round(0, 'floor') %}
                        <strong>{{ ((gtc|format_number(style="spellout", locale="uk"))|capitalize) }}
                        {% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривень' : (gtc % 10 == 1) ?
                        'гривня' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривні' : 'гривень' %}
                        {{ currencySuffix }}
                        {{ (gtr < 10 ? '0' ~ gtr : gtr) }}
                        {% set centsSuffix = (gtr >= 11 and gtr <= 14) ? 'копійок' : (gtr % 10 == 1) ?
                        'копійка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копійки' : 'копійок' %}
                        {{ centsSuffix }}
                        </strong>
                </p>
        </tr>
    </table>

    <br/>

    <table class="width100" style="border-top: solid 3px black;">
        <tr>
            <td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
                <span style="font-size: 90%;"><strong>Строк дії Рахунку протягом 3 діб, з моменту надання Покуцю</strong></span>
            </td>
            <td valign="top"
                style="padding-top: 15px; padding-right: 30px; display: flex; justify-content: space-between; border-bottom: solid 1px black;">
                <strong>Виписав(ла)</strong><strong style="background-color: yellow">Тест А.А.</strong>
            </td>
        </tr>
    </table>
</div>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
    }

    body {
        font-size: 16px;
        line-height: 1.3;
        min-width: 320px;
        font-family: sans-serif;
        overflow-x: hidden;
    }

    .container {
        margin-right: auto;
        margin-left: auto;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .label {
        font-weight: bold;
    }

    .underline {
        text-decoration: underline;
        font-style: italic;
    }

    .big-text {
        font-size: 18px;
    }

    .width100 {
        width: 100%;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        height: auto;
    }

    table td {
        padding-right: 5px;
        padding-left: 5px;
        border: none;
    }

    table th {
        background: #d4d4d4;
    }

    table.border td,
    table.border th {
        border: 1px solid black;
    }

    table.table-products {
        border: solid 2px black;
    }

    table.table-products th {
        padding: 15px 5px;
    }

    table.table-products td {
        padding: 5px;
    }

    table.table-sum {
        margin-top: 7px;
    }

    table.table-sum td {
        padding: 3px 5px 3px 15px;
    }

</style>
</html>
```

{% endtab %}
{% endtabs %}

### 4. Комерційна пропозиція

{% tabs %}
{% tab title="Зовнішній вигляд" %}

<figure><img src="https://3026330704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXpkXXVQNdriuGMnogYNZ%2Fuploads%2FYgDq2pUgjKNKt25gTVFs%2F4.png?alt=media&#x26;token=46e19850-922c-4a93-9bb4-b5dd5c66555c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Код шаблону" %}
**Тип шаблону:** Воронки

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Invoice</title>
</head>
<body>
    <div style="display: flex; flex-direction: row; justify-content: space-between">
       
	    <div style="display: flex; flex-direction: column; justify-content: center">
       
		    <img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="height: 100px" alt="">
			
        </div> 
        <div style="display: flex; flex-direction: column; justify-content: center">
       
		    <p style="margin: 0; text-indent: 1ch; font-style: italic;">Компанія "Name"</p>
		    
		    <p style="font-style: italic;">+38(050)000-00-00</p>
		    
		    <p style="font-style: italic;">+38(067)000-00-00</p>
			
		    <a href="https://blog.keycrm.app/" ><strong>blog.keycrm.app</strong></a>
			
        </div> 
			
    </div> 
 
    </br>

    <p class="text-center"><strong>Спеціальна комерційна пропозиція № {{ model.id }}</strong>
    <p class="text-right">{{ "now"|date("d.m.Y") }}</p>
    </br>
    
    <table class="table-products medium-text width100">
        <tbody>
        
            <tr class="border-row">
                <th class="text-center">№</th>
                <th>Фото</th>
                <th>Найменування</th>
                <th>Цiна</th>
                <th>Кількість</th>
                <th>Сума</th>
            </tr>
    
            {% for key, product in model.products %}
            <tr class="border-row">
                <td class="text-center">{{key + 1}}</td>
                <td><img src="{{ product.picture }}" width="70" style="border: 0; background: lightgrey; height: 70px; margin-top: 5px;"/></td>
                <td style="width:35%">{{ product.name }}</td>
                <td class="text-center">{{ product.price|number_format(2, '.', ' ') }}</td>
                <td class="text-center">{{ product.quantity }}</td>
                <td class="text-center">{{ (product.quantity * product.price)|number_format(2, '.', ' ') }}</td>
            </tr>
            {% endfor %}
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="text-center" style="border: 1px solid black;">{{ model.products_sum }}</td>    
            </tr>    
    </table>
    <p class="text-right" style="position: relative; top: -26px; right: 180px;">Сума (без ПДВ):</p>
    
    <p style="margin: 0; text-indent: 1ch; color: red;">● Ціни вказані з урахуванням доставки.
</p>
    <p style="margin: 0; text-indent: 1ch; color: red">● Ціна може змінюватись в залежності від курсу валюти.</p>

    </br></br>
    
    <p class="text-left"><strong>Ми пропонуємо:</strong></br>
     Високий рівень якості продукції та впізнаваності бренду.</br>
     Конкурентну ціну на ринку та високу маржинальність.</br>
     Швидкий зворотний зв'язок. Ми знаємо цінність вашого часу, тому оперативно опрацьовуємо ваші заявки.</br>
     Гнучку систему оплати та умови співпраці.</br>
     Якісну маркетингову підтримку: рекламні матеріали, створення спільних маркетингових компаній.</p>
    
    
</div>

</body>
<style>

  .page_break {
    page-break-after:always;
  }
    
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }
  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
    font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }
  .medium-text {
    font-size: 14px;
  }
  .small-text {
    font-size: 12px;
  }

  .width100 {
    width: 100%;
  }
  
  .border-row td, .border-row th {
      border: 1px solid black;
  }

  table {
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  }

  table td {
    padding-right: 5px;
    padding-left: 5px;
    border: none;
  }

  table th {
    background: #C5C9E4;
  }

  table.border td,
  table.border th {
    border: 1px solid black;
  }

  table.table-products {
    /*border: solid 2px black;*/
  }

  table.table-products th {
    padding: 15px 5px;
  }
  table.table-products td {
    padding: 5px;
  }
  
  table.table-payment-details td {
    padding: 3px;
  }

  table.table-sum {
    margin-top: 7px;
  }

  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }
  
  .flex-child {  
  padding: 15px;
  }
</style>
</html>
```

{% endtab %}
{% endtabs %}
