{% assign label_strings = "" %}

{% if invoice.language == 'de' %} 
  {% assign label_strings = "ANGEBOT | RECHNUNG | Datum | Beschreibung | Menge | Einzelpreis | Summe | Zwischensumme | Rabatt | USt. | Endsume"  %} 
{% elsif invoice.language == 'ru' %} 
  {% assign label_strings = "Смета | Счет-фактуры | Дата | Описание | Кол-во | Ед. | Цена | Подитог | Скидка  | Итого | НДС"  %} 
{% endif %}

{% if label_strings == "" %}
  {% assign label_strings = "Estimate | Invoice | Date | Description | Quantity | Unit Price | Price | Subtotal | Discount | Tax | Total" %}
{% endif %}
{% assign label_strings = label_strings | split: "| " %}

<div id="INVOICE" class="invoice">
  
  <div id="invoice-status" class="draft"></div>

  <div id="HEAD">
    <div id="HeadLeft">
      <div id="Sender">
        [Company name] GbR &nbsp;-&nbsp; [Street] &nbsp;-&nbsp; [Post code and City]
      </div>
      <div id="Recipient">
        <div id="RecName">{{ invoice.contact.name }}</div>
        {{ invoice.contact.post_address | multi_line }}
      </div>  
    </div>

    <div id="HeadRight">
      <img id="Logo" src="{{ account.logo }}">
      <div id="CompanyInfo">
        <strong>{{ account.company }}</strong>&nbsp;<br>
        {{ account.representative }}&nbsp;<br>
        {{ account.info | multi_line}}&nbsp;<br>
      </div>
    </div>
  </div>

  <div class="clear"></div>

  <div id="BODY">
    <div id="Title">
      {% if invoice.is_estimate? %}
                {{label_strings[0]}}
      {% else %}
                {{label_strings[1]}}
      {% endif %}
      {{ invoice.number }}
    </div>
    <div id="Date">
              {{label_strings[2]}}: {{ invoice.invoice_date | date: "%d.%m.%Y" }}
    </div>
    <div class="clear"></div>

    {% if invoice.description != '' %}
      <div id="Description" >
        {{ invoice.description | textile }}
      </div>
    {% endif %}

    <table id="Items">
      <thead id="ItemsHeader">
        <tr>
          <th class="item">#</th>
          <th class="description">{{label_strings[3]}}</th>
          <th class="quantity"> {{label_strings[4]}}</th>
          <th class="price-unit">{{label_strings[5]}}</th>
          <th class="price">{{label_strings[6]}}</th>
        </tr>
      </thead>
      <tbody id="ItemsBody">
        {% for item in invoice.lines %}
          <tr class="item-row" id="row_{{ item.id}}">
            <td class="position">{{ item.position }}</td>
            <td class="description">{{ item.description | multi_line }}</td>
            <td class="quantity">{{ item.quantity | numeric: 4 }}</td>
            <td class="price-unit">{{ item.price | currency }}</td>
            <td class="price">{{ item.total | currency }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    <table id="Totals">
        <tbody>
          <tr id="Subtotal">
            <td class="label">{{label_strings[7]}}</td>
            <td class="value">{{ invoice.subtotal | currency }}</td>
          </tr>

          {% if invoice.discount > 0 %}
            <tr id="Discount">
              <td class="label">
                        {{label_strings[8]}}
                {% if invoice.discount_type == 0 %}
                  ({{invoice.discount_rate}}%)
                {% endif %}
              </td>
              <td class="value">-{{ invoice.discount | currency }}</td>
            </tr>
          {% endif %}

          {% if invoice.has_taxes? %}
            {% for tax_group in invoice.tax_groups %}
            <tr class="Tax">
              <td class="label">  {{label_strings[9]}} {{tax_group[0]}}%</td>
              <td class="value">{{tax_group[1] | currency}}</td>
            </tr>
            {% endfor %}
          {% endif %}

          <tr id="Total">
            <td class="label">{{label_strings[10]}}</td>
            <td class="value">{{ invoice.amount | currency }}</td>
          </tr>
        </tbody>
      </table>

      <div class="clear"></div>
  </div>

  <div id="FOOTER">
    {{ account.bill_info | multi_line }}
  </div>

<style type="text/css">
  .clear {
    clear: both;
  }

  #INVOICE{
    padding-left: 0.5cm;
  }

  #HEAD{
    height: 6.5cm;
  }

  #HeadLeft{
    float: left;
    width: 8cm;
    margin: 2.3cm 0 0 0;
    padding: 0;
  }

  #Sender{
    font-size: 10px;
    line-height: 10px;
    color: #666666;
    padding: 0 0 0.4cm 0;
  }

  #Recipient{
    font-size: 13px;
    line-height: 17px;
  }

  #HeadRight{
    float: right;
    text-align: right;
    width: 5.5cm;
  }

  #CompanyInfo{
    display: inline-block;
  }

  #Logo{
    width: 5.5cm;
    margin: 0 0 0.5cm 0;
  }

  #BODY{
    margin: 0;
  }

  #Title{
    display: inline-block;
    float: left;
    font-size: 15px;
    font-weight: bold;
    color: #666666;
  }

  #Date{
    display: inline-block;
    float: right;
    color: #666666;
    font-size: 13px;
    font-weight: bold;
  }

  #Description{
    margin: 0.5cm 0;
    text-align: justify;
  }

  #Items{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0.5cm 0;
    width: 100%;
  }
  #Items .value {
    line-height: 30px;
    white-space: nowrap;
    width: 50%;
  }
  #Items .label {
    color: #494949;
    font-size: 14px;
    padding-right: 10px;
  }
  #Items td {
    border-bottom: 0.8pt solid #f2f2f2;
    padding: 0.1cm 0.5cm 0.2cm 0;
    vertical-align: top;
    webkit-hyphens: auto;
    moz-hyphens: auto;
    hyphens: auto;
    ms-word-break: break-word;
    word-break: break-word;
  }
  #Items th {
    border-bottom: 0.8pt solid #aaaaaa;
    padding: 0cm 0.5cm 0.1cm 0;
    color: #777777;
    font-size: 14px;
    white-space: nowrap;
  }
  #Items .position {
    min-width: 0.3cm;
    width: auto;
  }
  #Items td.description {
    width: auto;
    font-size: 11px;
    color: #333;
  }
  #Items td.description h4{
    display: inline;
    margin: 0 0 2mm 0;
    apdding: 0;
    font-weight: bold;
    font-size: 12px;
    color: #000;
  }
  #Items .quantity {
    max-width: 2cm;
    text-align: right;
    white-space: nowrap;
    width: auto;
  }
  #Items .price-unit {
    max-width: 2.5cm;
    ms-text-overflow: ellipsis;
    o-text-overflow: ellipsis;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
  }
  #Items .price {
    max-width: 2.5cm;
    padding-right: 0px;
    text-align: right;
    white-space: nowrap;
    width: auto;
  }

  #Totals{
    border-collapse: collapse;
    border-spacing: 0px;
    width: 7cm;
    padding: 0;
    margin: 0 0 0 9.2cm;
  }
  #Totals td{
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    white-space: nowrap;
  }
  #Totals .label {
  }
  #Totals .value {
    padding-right: 0.5cm;
    text-align: right;
  }
  #Totals #Total td{
    padding-top: 0.3cm;
    font-size: 13px;
    font-weight: bold;
  }

  #FOOTER{
    margin: 0.5cm 0 0;
    border-top: 1px solid #666666;
    padding-top: 0.3cm;
    font-size: 10px;
    color: #666666;
    text-align: justify;
  }
</style>