{% set base_top_offset = 275 %}
{% set line_height = 25 %}
{% set text_1_base_offset = 185 %}
{% set text_2_base_offset = 420 %}

{% if buyer_lines >= seller_lines %}
	{% set top = base_top_offset + (line_height * buyer_lines) %}
{% else %}
	{% set top = base_top_offset + (line_height * seller_lines) %}
{% endif %}

{% set max_lines = (top - base_top_offset) / line_height %}
{% set text_1_top = text_1_base_offset + (max_lines * line_height) %}

{% set line_items = invoice.lines|length %}
{% set text_2_top = text_2_base_offset
	+ (line_height * max_lines)
	+ (line_items * line_height)
	+ (invoice.tax > 0 ? line_height : 0)
	+ ((invoice.discount|default and invoice.discount > 0) ? line_height : 0)
%}

{% set address_lines = [] %}
	{% for line in [footer.address_1, footer.address_2, footer.address_3] %}
		{% if line|length > 0 %}
			{% set address_lines = address_lines|merge([line]) %}
		{% endif %}
	{% endfor %}
{% set address = address_lines|join(', ') %}

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
		<title>{{ invoice.serie_nr }}</title>
		<style>
			{{ css }}
		</style>
	</head>
	<body>
		{% if logo_source is not empty %}
			<img src='{{ logo_source }}' height='50' class='CompanyLogo'>
		{% endif %}
		<hr class='TopSectionDivider'>
		<div class='InvoiceInfo'>
			<p>{{ 'Invoice Number'|trans }}: {{ invoice.serie_nr }}</p>
			<p>{{ 'Invoice Date'|trans }}: {{ invoice.created_at|format_date }}</p>
			<p>{{ 'Due Date'|trans }}: {{ invoice.due_at|format_date }}</p>
			<p>{{ 'Invoice Status'|trans }}: {{ invoice.status|capitalize }}</p>
		</div>

		<h3 class='CompanyInfo'>{{ 'Company'|trans }}</h3>
		<div class='CompanyInfo'>
			<p>
				{% for key, value in seller %}
					{% if key == 'Name' %}<b>{% endif %}
					{% if key == 'Phone' %} {{ 'Phone'|trans }} :{% endif %}
					{% if key == 'VAT Number' %} {{ 'VAT Number'|trans }} :{% endif %}
							{{ value }}<br>
					{% if key == 'Name' %}</b>{% endif %}
				{% endfor %}
			</p>
		</div>

		<h3 class='ClientInfo'>{{ 'Client'|trans }}</h3>
		<div class='ClientInfo'>
			<p>
			{% for key, value in buyer %}
				{% if key == 'Company' %}<b>{% endif %}
				{% if key == 'Phone' %} {{ 'Phone'|trans }} :{% endif %}
				{% if key == 'VAT Number' %} {{ 'VAT Number'|trans }} :{% endif %}
						{{ value }}<br>
				{% if key == 'Company' %}</b>{% endif %}
			{% endfor %}
			</p>
		</div>

		<div class='InvoiceText' style='top: {{ text_1_top }}px;'>
			{% if invoice.text_1 %}
				{{ (invoice.text_1 ?? '')|markdown_to_html }}
			{% endif %}
		</div>

		<div class='Breakdown' style='top: {{ top }}px;'>
			<table style='width:100%'>
				<tr>
					<th style='text-align: center; width:25px;'>#</th>
					<th style='text-align: left'>{{ 'Product'|trans }}</th>
					<th style='text-align: right'>{{ 'Quantity & Price'|trans }}</th>
					<th style='text-align: right'>{{ 'Total'|trans }}</th>
				</tr>
				{% set nr = 0 %}
				{% for item in invoice.lines %}
					{% set nr = nr + 1 %}
					<tr>
						<td style='text-align: center; width:25px;'>{{ nr }}</td>
						<td style='text-align: left'>{{ item.title }}</td>
						<td style='text-align: right'>{{ item.quantity }}x {{ item.price|format_currency(currency_code) }}</td>
						<td style='text-align: right'>{{ item.total|format_currency(currency_code) }}</td>
					</tr>
				{% endfor %}
				<tr>
					<td colspan="4" style="border-bottom: 1px solid #000; padding: 0;"></td>
				</tr>
				{% if invoice.tax > 0 %}
					<tr>
						<th style='text-align: right' colspan='3'>{{ invoice.taxname }}
							{{ invoice.taxrate }}% Tax:</th>
						<th style='text-align: right'>{{ invoice.tax|format_currency(currency_code) }}</th>
					</tr>
				{% endif %}
				{% if invoice.discount|default and invoice.discount > 0 %}
					<tr>
						<th style='text-align: right' colspan='3'>{{ 'Discount'|trans }}:</th>
						<th style='text-align: right'>{{ invoice.discount|format_currency(currency_code) }}</th>
					</tr>
				{% endif %}
				<tr>
					<th style='text-align: right'  colspan='3'>{{ 'Total'|trans }}:</th>
					<th style='text-align: right'>{{ invoice.total|format_currency(currency_code) }}</th>
				</tr>
			</table>
		</div>

        {% if invoice.text_2 %}
            <div class='InvoiceText' style='top: {{ text_2_top }}px;'>
                {{ (invoice.text_2 ?? '')|markdown_to_html }}
            </div>
        {% endif %}

		<div class='InvoiceFooter'>
			{% if footer.display_bank_info == 1 %}
				<b>{{ 'Payment details'|trans }}:</b><br >
				<b>{{ 'Account Owner'|trans }}:</b> {{ footer.company_name }} | <b>{{ 'Bank'|trans }}:</b> {{ footer.bank_name }} | <b>{{ 'BIC / SWIFT Code'|trans }}:</b> {{ footer.bic }} | <b>{{ 'Account Number'|trans }}:</b> {{ footer.account_number }}<br><br>
			{% endif %}

			<b>{{ footer.company_name }}</b>
			{% if address %} {{ address }} <br> {% endif %}
			<b>{{ 'Email'|trans }}:</b> {{ footer.email }} | <b>
			{% if footer.phone %} {{ 'Phone'|trans }}:</b> {{ footer.phone }}<br> {% endif %}
			{% if footer.company_vat %} <b>{{ 'VAT ID'|trans }}:</b> {{ footer.company_vat }} | {% endif %}
			{% if footer.company_number %} <b>{{ 'Company Registration #:'|trans }}</b> {{ footer.company_number }} | {% endif %}
			<b>{{ 'Website'|trans }}: </b>{{ footer.www }}
            <br>
            <span class="muted-text">{{ footer.signature }}</span>
		</div>
	</body>
</html>
