<style type="text/css">
  {% include 'css_document' %}
</style>

<h1 id="doc_title" class="left_aligned">
  {{ account.company.name }}
</h1>

<div id="company_info" class="right_aligned">
  <p>
    {% include 'company' for account.company %}
  </p>
</div>

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

{{ # DETAILS }}

<div class="document_details">
  {{ # LEFT DETAILS }}
  <div class="left_aligned">
    <table class="formContent">
      <tr>
        <td class="bigger">{{ 'Invoice ID' | make_label }}</td>
        <td style="padding-right:10px;" class="bigger">
          {{ invoice.id }}
        </td>
      </tr>
      <tr>
        <td style="vertical-align:top;">{{ 'Client' | make_label }}</td>
        <td>
          {% include 'client' for invoice.client %}
        </td>
      </tr>
      {% if invoice.project_count > 0 %}
        <tr>
          <td>{{ invoice.project_count | pluralize: 'Project' | make_label }}</td>
          <td>
            {% for p in invoice.projects %}
              {{ p.name }}
              <br/>
            {% endfor %}
          </td>
        </tr>
      {% endif %}
      <tr>
        {{ # INVOICE DATE }}
        <td>{{ 'Invoice Date' | make_label }}</td>
        <td style="padding-right:10px;">
          {{ invoice.invoice_date | format_date }}
          <span class="info noprint">
            ({{ invoice.invoice_date | format_date_in_english }})
          </span>
        </td>
      </tr>
      <tr>
        {{ # INVOICE DUE DATE }}
        <td>{{ 'Due Date' | make_label }}</td>
        <td style="padding-right:10px;">
          {{ invoice.due_date | format_date }}
          <span class="info noprint">
            ({{ invoice.due_date | format_date_in_english }})
          </span>
        </td>
      </tr>
    </table>
  </div>

  {{ # RIGHT DETAILS }}
  {% capture total_due_string %}Total Due On<br/> {{ invoice.due_date | format_date }}{% endcapture %}
  <div class="right_aligned">
    <span class="bigger">{{ total_due_string | make_label }}</span><br/>
    <div id="total_amount">{{ invoice.total_due | format_money }}</div>
  </div>

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

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


{{ # NOTES }}

{% if invoice.notes != blank %}
  <h2>Notes</h2>
  <div class="content_pad">
    {{ invoice.notes | format_text }}
  </div>
{% endif %}


{{ # INVOICE ITEMS TABLE }}

<table class="list" cellpadding="0" cellspacing="0">
  <colgroup>
    <col />
    <col style="width:100px;" />
    <col style="width:100px;" />
    <col style="width:100px;" />
    <col style="width:130px;" />
  </colgroup>
  <tr>
    <th class="first">Item Description</th>
    <th class="numeric">Quantity</th>
    <th class="numeric">Price Per</th>
    <th class="numeric">Flat Fee</th>
    <th class="numeric last">Total Cost</th>
  </tr>
  {% if invoice.line_items == null %} 
    <tbody id="no_items_body">
      <tr>
        <td colspan="6" class="first last info">
          No items have been created for this invoice yet.
        </td>
      </tr>
    </tbody>
  {% else %}
    <tbody id="item_list_body">
      {{ # INVOICE ITEM LOOP }}

      {{ # First, display items that don't belong to any project }}
      {% for item in invoice.items_ad_hoc %}
        {% include 'invoice_row' for item %}
      {% endfor %}
      
      {{ # Now, display items grouped by project that belong to one }}
      {% for project in invoice.items_by_project %}
        <tr class="summary project">
          <td colspan="5" class="first last">
            {{ project[0] }}
          </td>
        </tr>
        {% for item in project[1] %}
          {% include 'invoice_row' for item %}
        {% endfor %}
      {% endfor %}
      
      
    </tbody>
  {% endif %}
  
  {{ # ITEM FOOTER }}
  
  <tbody id="item_list_footer">
    {{ # ITEM TOTAL }}
    {% if invoice.sales_tax != null %}
      <tr class="summary first">
        <td class="first numeric" colspan="4"><b>Item Total</b></td>
        <td class="numeric money_gain last">{{ invoice.item_cost | format_money }}</td>
      </tr>
      {{ # SALES TAX }}
      <tr class="summary">
        <td class="first numeric" colspan="4">
          <b>Tax</b> - {{ invoice.sales_tax }}%
        </td>
        <td class="numeric money_gain last">{{ invoice.tax_cost | format_money }}</td>
      </tr>
    {% endif %}
    {% if invoice.sales_tax_2 != null %}
      {{ # SALES TAX 2 }}
      <tr class="summary">
        <td class="first numeric" colspan="4">
          <b>Tax 2</b> - {{ invoice.sales_tax_2 }}%
        </td>
        <td class="numeric money_gain last">{{ invoice.tax_cost_2 | format_money }}</td>
      </tr>
    {% endif %}

    {{ # LATE FEE }}
    {% if invoice.late_cost > 0 %}
      <tr class="summary">
        <td class="first numeric" colspan="4">
          <b>Late Fee</b> - {{ invoice.late_percentage }}% every {{ invoice.late_period_in_days }} days past due
        </td>
        <td class="numeric money_gain last">{{ invoice.late_cost | format_money }}</td>
      </tr>
    {% endif %}


    {% if invoice.payments %}
      {{ # INVOICE TOTAL }}
      <tr class="summary">
        <td class="first numeric" colspan="4">Invoice Total</td>
        <td class="numeric money_gain last">{{ invoice.final_cost | format_money }}</td>
      </tr>
      {% for payment in invoice.payments %}
        {{ # PAYMENTS }}
        <tr class="summary">
          <td class="first numeric" colspan="4">
            Payment: {{ payment.id }} - {{ payment.created_on | format_date }}
          </td>
          <td class="numeric money_loss last">
            {{ payment.amount | format_money }}
          </td>
        </tr>
      {% endfor %}
    {% endif %}

    {{ # FINAL TOTAL }}
    <tr class="footer">
      {% if invoice.has_been_paid %}
        <td class="first numeric last" colspan="5">
          <span class="money_gain">Paid in full</span>
        </td>
      {% else %}
        <td class="first numeric" colspan="4">Total Due</td>
        <td class="numeric last">
          <span class="money_gain">{{ invoice.total_due | format_money }}</span>
        </td>
      {% endif %}
    </tr>
  </tbody>
  
</table>