{% extends 'base.html' %}
{% block title %}Expense Detail{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">Expense Detail</h1>
  <a href="{% url 'finance:expense_list' %}" class="btn btn-ghost btn-sm">← Back</a>
</div>

<div class="card bg-base-100 shadow max-w-lg">
  <div class="card-body space-y-3 text-sm">
    <div class="flex justify-between">
      <span class="text-base-content/50">Description</span>
      <span class="font-medium">{{ expense.description }}</span>
    </div>
    <div class="flex justify-between">
      <span class="text-base-content/50">Category</span>
      <span>{{ expense.category.name }}</span>
    </div>
    <div class="flex justify-between">
      <span class="text-base-content/50">Account</span>
      <span>{{ expense.account.name }}</span>
    </div>
    <div class="flex justify-between">
      <span class="text-base-content/50">Amount</span>
      <span class="text-error font-bold text-base">
        {{ business.currency }} {{ expense.amount|floatformat:0 }}
      </span>
    </div>
    <div class="flex justify-between">
      <span class="text-base-content/50">Reference</span>
      <span class="font-mono text-xs">{{ expense.reference|default:"—" }}</span>
    </div>
    <div class="flex justify-between">
      <span class="text-base-content/50">Date</span>
      <span>{{ expense.date|date:"d M Y" }}</span>
    </div>
    <div class="flex justify-between">
      <span class="text-base-content/50">Recorded by</span>
      <span>{{ expense.created_by.username|default:"—" }}</span>
    </div>
  </div>
</div>
{% endblock %}