{% extends "base.html" %}
{% load static %}

{% block title %}Voucher detail{% endblock %}

{% block content %}
<section id="voucher-header">
  <h1>{{ voucher.title }}</h1>
  <p>Created: {{ voucher.date }}</p>
</section>

{% if voucher.approved %}
<div class="approved-banner">
  <span>Approved by {{ voucher.approver }}</span>
</div>
{% elif voucher.rejected %}
<div class="rejected-banner">
  <span>Rejected</span>
</div>
{% else %}
<div class="pending-banner">
  <span>Awaiting approval</span>
</div>
{% endif %}

<table id="voucher-lines">
  <thead>
    <tr>
      <th>Description</th>
      <th>Amount</th>
      {% if show_vat %}<th>VAT</th>{% endif %}
    </tr>
  </thead>
  <tbody>
    {% for line in voucher.lines %}
    <tr>
      <td>{{ line.description }}</td>
      <td>{{ line.amount|floatformat:2 }}</td>
      {% if show_vat %}
      <td>{{ line.vat|floatformat:2 }}</td>
      {% endif %}
    </tr>
    {% empty %}
    <tr><td colspan="3">No lines</td></tr>
    {% endfor %}
  </tbody>
</table>

{% if user.can_approve %}
<form id="approve-form" method="POST" action="{% url 'approve' voucher.pk %}">
  {% csrf_token %}
  {% include "voucher/_comment_field.html" %}
  <button type="submit">Approve</button>
</form>
{% endif %}

{% block extra_js %}
<script src="{% static 'js/voucher.js' %}"></script>
{% endblock %}
{% endblock %}