{% extends 'bills/base.html' %}

{% block head %}
<style type="text/css">
    {% with color="#B23" %}
    {% include 'bills/microspective.css' %}
    {% endwith %}
</style>
{% endblock %}

{% block body %}
<div class="wrapper">
<div class="content">
{% block header %}
<div id="logo">
    {% block logo %}
    <div style="border-bottom:5px solid {{ color }}; color:{{ color }}; font-size:30; margin-right: 20px;">
    YOUR<br>
    LOGO<br>
    HERE<br>
    </div>
    {% endblock %}
</div>
<div id="seller-details">
    <div claas="address">
        <span class="name">{{ seller.name }}</span>
    </div>
    <div class="contact">
        <p>{{ seller.address }}<br>
        {{ seller.zipcode }} - {{ seller.city }}<br>
        {{ seller.country }}<br>
        </p>
        <p><a href="tel:93-803-21-32">{{ seller_info.phone }}</a><br>
        <a href="mailto:sales@pangea.org">{{ seller_info.email }}</a><br>
        <a href="http://www.pangea.org">{{ seller_info.website }}</a></p>
    </div>
</div>
{% endblock %}

{% block summary %}
<div id="bill-number">
        {{ bill.get_type_display.capitalize }}<br>
        <span class="value">{{ bill.number }}</span><br>
</div>
<div id="bill-summary">
    <hr>
    <div id="due-date">
        <span class="title">DUE DATE</span><br>
        <psan class="value">{{ bill.due_on | default:default_due_date | date }}</span>
    </div>
    <div id="total">
        <span class="title">TOTAL</span><br>
        <psan class="value">{{ bill.get_total }} &{{ currency.lower }};</span>
    </div>
    <div id="bill-date">
        <span class="title">{{ bill.get_type_display.upper }} DATE</span><br>
        <psan class="value">{{ bill.closed_on | default:now | date }}</span>
    </div>
</div>
<div id="buyer-details">
    <span class="name">{{ buyer.name }}</span><br>
    {{ buyer.vat }}<br>
    {{ buyer.address }}<br>
    {{ buyer.zipcode }} - {{ buyer.city }}<br>
    {{ buyer.country }}<br>
</div>
{% endblock %}

{% block content %}
<div id="lines">
    <span class="title column-id">id</span>
    <span class="title column-description">description</span>
    <span class="title column-quantity">hrs/qty</span>
    <span class="title column-rate">rate/price</span>
    <span class="title column-subtotal">subtotal</span>
    <br>
    {% for line in lines %}
    {% with sublines=line.sublines.all %}
    <span class="{% if not sublines %}last {% endif %}column-id">{{ line.id }}</span>
    <span class="{% if not sublines %}last {% endif %}column-description">{{ line.description }}</span>
    <span class="{% if not sublines %}last {% endif %}column-quantity">{{ line.quantity|default:"&nbsp;" }}</span>
    <span class="{% if not sublines %}last {% endif %}column-rate">{% if line.rate %}{{ line.rate }} &{{ currency.lower }};{% else %}&nbsp;{% endif %}</span>
    <span class="{% if not sublines %}last {% endif %}column-subtotal">{{ line.subtotal }} &{{ currency.lower }};</span>
    <br>
        {% for subline in sublines %}
            <span class="{% if forloop.last %}last {% endif %}subline column-id">&nbsp;</span>
            <span class="{% if forloop.last %}last {% endif %}subline column-description">{{ subline.description }}</span>
            <span class="{% if forloop.last %}last {% endif %}subline column-quantity">&nbsp;</span>
            <span class="{% if forloop.last %}last {% endif %}subline column-rate">&nbsp;</span>
            <span class="{% if forloop.last %}last {% endif %}subline column-subtotal">{{ subline.total }} &{{ currency.lower }};</span>
            <br>
        {% endfor %}
    {% endwith %}
    {% endfor %}
</div>
<div id="totals">
    <br>&nbsp;<br>
    {% for tax, subtotal in bill.get_subtotals.iteritems %}
        <span class="subtotal column-title">subtotal {{ tax }}% VAT</span>
        <span class="subtotal column-value">{{ subtotal | first }} &{{ currency.lower }};</span>
        <br>
        <span class="tax column-title">taxes {{ tax }}% VAT</span>
        <span class="tax column-value">{{ subtotal | last }} &{{ currency.lower }};</span>
        <br>
    {% endfor %}
    <span class="total column-title">total</span>
    <span class="total column-value">{{ bill.get_total }} &{{ currency.lower }};</span>
    <br>
</div>
{% endblock %}

{% block footer %}
</div>
<div class="footer">
    <div id="footer-column-1">
        <div id="comments">
            {% if bill.comments %}
            <span class="title">COMMENTS</span> {{ bill.comments|linebreaksbr }}
            {% endif %}
        </div>
    </div>
    <div id="footer-column-2">
        <div id="payment">
            <span class="title">PAYMENT</span>
                {% if payment.message %}
                    {{ payment.message | safe }}
                {% else %}
                    You can pay our {{ bill.get_type_display.lower }} by bank transfer. <br>
                    Please make sure to state your name and the {{ bill.get_type_display.lower}} number.
                    Our bank account number is <br>
                    <strong>{{ seller_info.bank_account }}</strong>
                {% endif %}
        </div>
        <div id="questions">
            <span class="title">QUESTIONS</span> If you have any question about your {{ bill.get_type_display.lower}}, please
            feel free to contact us at your convinience. We will reply as soon as we get
            your message.
        </div>
    </div>
</div>
</div>
{% endblock %}
{% endblock %}