<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 'company' for invoice.company %}
        </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="tasks_body">
      {{ # INVOICE ITEM LOOP }}
      {% for item in invoice.line_items %}
        {% assign time_entry_class = '' %}

        {% if invoice.include_time_entries %}
          {% assign time_entry_class = 'line' %}
        {% endif %}

        <tr class="{% cycle 'parent_row': 'even', 'odd' %} {{time_entry_class}}">
          <td class="first">
            {{ item.description | format_text }}
          </td>
          <td class="numeric">
            {{ item.quantity | number_with_delimiter: ',' }}
          </td>
          <td class="numeric">
            {{ item.price_per | format_money }}
          </td>
          <td class="numeric">
            {{ item.flat_fee | format_money }}
          </td>
          <td class="numeric money_gain last" id="">
            {{ item.final_cost | format_money }}
          </td>
        </tr>
        {% if item.has_time_entries_shown %}
          <tr class="{% cycle 'child_row': 'even', 'odd' %}">
            <td class="first last" colspan="6">
              <table class="inner">
                <colgroup>
                  <col style="width:80px;" />
                  <col style="width:90px;" />
                  <col style="width:120px;" />
                  <col />
                  <col />
                </colgroup>
                {% for entry in item.time_entries %}
                  <tr class="info">
                    <td class="numeric">{{entry.created_on | format_date }}</td>
                    <td class="numeric">{{ entry.minutes | format_hours }} hrs</td>
                    <td style="padding-left:10px !important;">{{ entry.person_name }}</td>
                    <td>
                      {% if entry.description != empty %}
                        {{ entry.description | format_text }}
                      {% else %}
                        &nbsp;
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </table>
            </td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  {% endif %}

  {{ # ITEM FOOTER }}

  <tbody id="tasks_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.quantity%}
      {{ # INVOICE QUANTITY}}
      <tr class="summary">
        <td class="first numeric" colspan="1">Total Hours</td>
        <td class="numeric item_gain last">{{ item.quantity | number_with_delimiter: ',' }}</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: PMT-{{ 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>