{% load static %}
<html>
<head>
    <title>Payment for {{ document.kind }} {{ document.series }}-{{ document.number }}</title>
    <style type="text/css">
        @page {
            size: a4;
            margin: 2cm;
        }
        form p {
          width: 32%;
          float: left;
          margin-right: 1%;
        }
        form p input,
        form p select,
        form p textarea {
          width: 100%;
          margin-bottom: 2%;
        }
        form span {
          display: block;
        }
        form em {
          color: red;
          font-size: 80%;
        }
        form fieldset:after {
          content: "";
          display: table;
          clear: both;
        }
        form fieldset[role="actions"] {
          text-align: center;
        }
        table {
          width: 100%;
        }
        table thead td {
          vertical-align: top;
        }
        table small {
          color: gray;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{% static 'css/skeleton.css' %}">

    {% block extrahead %}
    {% endblock %}

</head>
<body>
    <div class="container">
        {% block payment_processor %}
        {% endblock %}

        {% block document %}
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <td>
                            {% block document_issuer %}
                                <h5><span>Issuer:</span> {{ provider.billing_name }}</h5>
                                <p>{{ provider.address_1 }}<br />

                                {% if provider.address_2 %}
                                    {{ provider.address_2 }}<br />
                                {% endif %}

                                {{ provider.city }}<br />

                                {% if provider.state %}
                                    {{ provider.state }}<br />
                                {% endif %}

                                {% if provider.zip_code %}
                                    {{ provider.zip_code }}<br />
                                {% endif %}

                                {% if provider.email %}
                                    <strong>Email:</strong> {{ provider.email }}<br />
                                {% endif %}

                                {% if provider.extra %}
                                    {{ provider.extra|linebreaksbr }}
                                {% endif %}
                                </p>
                            {% endblock %}
                        </td>
                        <td>
                            {% block document_customer %}
                                <h5><span>Customer:</span> {{ customer.billing_name }}</h5>
                                <p>
                                {% if customer.sales_tax_number %}
                                    {{ customer.sales_tax_number }}<br />
                                {% endif %}

                                {{ customer.address_1 }}<br />

                                {% if customer.address_2 %}
                                    {{ customer.address_2 }}<br />
                                {% endif %}

                                {{ customer.city }}<br />

                                {% if customer.state %}
                                    {{ customer.state }}<br />
                                {% endif %}

                                {% if customer.zip_code %}
                                    {{ customer.zip_code }}<br />
                                {% endif %}

                                {% if customer.email %}
                                    {{ customer.email }}<br />
                                {% endif %}

                                {% if customer.company %}
                                    {{ customer.company }}<br />
                                {% endif %}

                                {% if customer.extra %}
                                    {{ customer.extra|linebreaksbr }}<br />
                                {% endif %}
                                </p>
                            {% endblock %}
                        </td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td colspan="2">
                            {% if transaction.state == transaction.States.Initial %}
                                {% block form %}
                                    <div>
                                        <strong>{{ transaction.amount }} {{ transaction.currency }}</strong>
                                        {{ form }}
                                    </div>
                                {% endblock %}
                            {% else %}
                                {% block transaction %}
                                    <strong> The payment is {{ transaction.state }}.</strong>
                                {% endblock %}
                            {% endif %}
                        </td>
                    </tr>
                </tbody>
            </table>
            {% block document_details %}
                <table cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Service</th>
                            <th>Unit</th>
                            <th>Qty.</th>
                            <th>Unit Price</th>
                            <th>Total Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for entry in entries %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ entry.description }}</td>
                            <td>{{ entry.unit }}</td>
                            <td>{{ entry.quantity|floatformat:-2 }}</td>
                            <td>{{ entry.unit_price|floatformat:2 }} {{ document.currency }}</td>
                            <td>{{ entry.total|floatformat:2 }} {{ document.currency }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5">
                              <strong>Amount paid</strong>
                              <br/><small>* this may not represent document's total amount</small>
                            </td>
                            <td>
                                <strong>{{ transaction.amount }} {{ transaction.currency }}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                              <h3>Total amount</h3>
                            </td>
                            <td>
                                <h3>{{ document.total|floatformat:2 }} {{ document.currency }}</h3>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            {% endblock %}
        {% endblock %}

        {% block footer %}
        {% endblock %}
    </div>
</body>
