{% extends "ledger/base.html" %}
{% load ledger_extras %}
{% block title %}{{ expense.description }} · tripsplit{% endblock %}
{% block content %}
<div class="toolbar">
  <div><h1>{{ expense.description }}{% if expense.deleted_at %} <span class="pill warn">deleted</span>{% endif %}</h1>
    <p class="sub" style="margin:0">{{ expense.date|date:"j M Y" }} · {{ category }} · {{ expense.get_split_method_display }}</p></div>
  <span class="spacer"></span>
  {% if not expense.deleted_at %}
  <a class="btn secondary" href="{% url 'expense_edit' group.id expense.id %}">Edit</a>
  <form class="inline" method="post" action="{% url 'expense_delete' group.id expense.id %}">{% csrf_token %}<button class="btn danger" type="submit">Delete</button></form>
  {% endif %}
</div>
<div class="grid">
  <div class="card">
    <div class="stat">{{ expense.amount|dec:expense.currency }}</div>
    {% if foreign %}<p class="muted">1 {{ expense.currency }} = {{ expense.fx_rate.normalize }} {{ group.base_currency }} · ≈ {{ base_total|dec:group.base_currency }}</p>{% endif %}
    <h2 style="margin-top:16px">Paid by</h2>
    <table>{% for m, a in payers %}<tr><td>{{ m.name }}</td><td class="num">{{ a|dec:expense.currency }}</td></tr>{% endfor %}</table>
    {% if expense.notes %}<h2 style="margin-top:16px">Notes</h2><p>{{ expense.notes|linebreaksbr }}</p>{% endif %}
    {% if expense.receipt %}<h2 style="margin-top:16px">Receipt</h2><a href="{{ expense.receipt.url }}" target="_blank">Open receipt</a>{% endif %}
  </div>
  <div class="card">
    <h2>Shares</h2>
    <table>{% for m, a in shares %}<tr><td>{{ m.name }}</td><td class="num">{{ a|dec:expense.currency }}</td></tr>{% endfor %}</table>
    {% if expense.split_method == 'itemized' %}
      <h2 style="margin-top:16px">Receipt lines</h2>
      <table>{% for item in expense.split_data.items %}<tr><td>{{ item.name }}</td><td class="num">{{ item.amount }}</td></tr>{% endfor %}
      <tr><td class="muted">Tax</td><td class="num">{{ expense.split_data.tax }}</td></tr>
      <tr><td class="muted">Tip</td><td class="num">{{ expense.split_data.tip }}</td></tr></table>
    {% endif %}
  </div>
</div>
<div class="card" style="margin-top:18px">
  <h2>Comments</h2>
  {% for c in expense.comments.all %}<p><strong>{{ c.author }}</strong> <span class="muted">{{ c.created_at|timesince }} ago</span><br>{{ c.text }}</p>
  {% empty %}<p class="muted">No comments yet.</p>{% endfor %}
  <form method="post">{% csrf_token %}<div class="field"><input type="text" name="text" placeholder="Add a comment"></div><button class="btn small" type="submit">Post</button></form>
</div>
{% endblock %}