{% extends 'bills/microspective.html' %}
{% load i18n %}

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

#buyer-details {
    clear: left;
    margin-top: 40px;
    margin-left: 54%;
    margin-bottom: 40px;
}

.column-1 {
    float: left;
    font-size: 30;
    font-weight: bold;
    text-align: right;
    color: #666;
    width: 40%;
    margin: 10px;
}


#number-date {
    font-size: large;
}

#number-value {
    font-size: 30;
    color: #809708;
}

.column-2 {
    float: right;
    padding: 15px;
    margin: 10px;
    margin-top: 0px;
    width: 44%;
    font-size: large;
}

#amount {
    color: white;
    background-color: #809708;
}

#amount-value {
    font-size: 30;
    font-weight: bold;
}

#date {
    clear: left;
    clear: right;
    margin-top: 0px;
    padding-top: 0px;
    font-weight: bold;
    color: #666;
}

#text {
    clear: left;
    clear: right;
    text-align: right;
    margin: 240px 10px 50px 10px;
    font-weight: bold;
    color: #666;
}

#text strong {
    color: #809708;
}

hr {
    margin-top: 20px;
    border: 2px solid #809708;
    clear: left;
}
</style>
{% endblock %}

{% block summary %}
<div style="position: relative; margin-top: 140px;">
<hr>
</div>

<div id="buyer-details">
    <span class="name">{{ buyer.get_name }}</span><br>
    {{ buyer.vat }}<br>
    {{ buyer.address }}<br>
    {{ buyer.zipcode }} - {{ buyer.city }}<br>
    {% trans buyer.get_country_display %}<br>
</div>

<div id="number" class="column-1">
    <span id="number-title">{% filter title %}{% trans bill.get_type_display %}{% endfilter %}</span><br>
    <span id="number-value">{{ bill.number }}</span><br>
    <span id="number-date">{{ bill.closed_on | default:now | date:"F j, Y" | capfirst }}</span><br>
</div>

<div id="amount" class="column-2">
    <span id="amount-value">{{ bill.get_total }} &{{ currency.lower }};</span><br>
    <span id="amount-note">{% trans "Due date" %} {{ payment.due_date| default:default_due_date | date:"F j, Y" }}<br>
    {% if not payment.message %}{% blocktrans with bank_account=seller_info.bank_account %}On {{ bank_account }}{% endblocktrans %}{% endif %}<br>
    </span>
</div>

<div id="date" class="column-2">
{% with line=bill.lines.get %}
{% blocktrans with ini=line.start_on|date:"F j, Y" end=line.end_on|date:"F j, Y" %}From {{ ini }} to {{ end }}{% endblocktrans %}
{% endwith %}
</div>
{% endblock %}

{% block content %}
<div id="text">
{% blocktrans %}
<strong>With your membership</strong> you are supporting ...
{% endblocktrans %}
</div>
{% endblock %}

{% block footer %}
<hr>
{{ block.super }}
{% endblock %}
