{% extends "adminpanel/base.html" %}
{% load money %}
{% block title %}{{ invoice.number }} — admin{% endblock %}
{% block heading %}{{ invoice.number }}{% endblock %}

{% block content %}
<div class="pane" style="max-width:760px">
  <a class="back" href="{% url 'admin_invoices' %}">&larr; All invoices</a>
  <div class="panel">
    <div class="panel-h"><h2>Invoice {{ invoice.number }}</h2>
      <span class="status {{ invoice.get_status_display|status_class }} act">{{ invoice.get_status_display }}</span></div>
    <div class="panel-b">
      <dl class="dl" style="margin-bottom:20px">
        <dt>Client</dt><dd><a href="{% url 'admin_client' invoice.client.pk %}" style="color:var(--gold)">{{ invoice.client }}</a></dd>
        <dt>Project</dt><dd>{{ invoice.project.name|default:"—" }}</dd>
        <dt>Issued</dt><dd>{{ invoice.issued_on|date:"j M Y"|default:"—" }}</dd>
        <dt>Due</dt><dd>{{ invoice.due_on|date:"j M Y"|default:"—" }}</dd>
      </dl>
      <table>
        <tr><th>Description</th><th>Amount</th></tr>
        {% for item in invoice.items.all %}<tr><td>{{ item.description }}</td><td>{{ item.amount|naira }}</td></tr>
        {% empty %}<tr><td>{{ invoice.description }}</td><td>{{ invoice.total|naira }}</td></tr>{% endfor %}
        <tr><td style="font-weight:600">Total</td><td style="font-weight:600">{{ invoice.total|naira }}</td></tr>
        <tr><td>Paid</td><td>{{ invoice.amount_paid|naira }}</td></tr>
        <tr><td style="font-weight:600">Balance</td><td style="color:var(--gold);font-weight:600">{{ invoice.balance|naira }}</td></tr>
      </table>
      <div style="display:flex;gap:10px;margin-top:20px;flex-wrap:wrap">
        <button class="btn" onclick="window.print()">Print or save as PDF</button>
        <a href="{% url 'admin_invoice_edit' invoice.number %}" class="btn">Edit invoice</a>
        <a href="mailto:{{ invoice.client.user.email }}?subject=Invoice {{ invoice.number }}" class="btn btn-primary">Email client</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}