{% extends 'base.html' %}
{% block title %}{{ account.name }}{% endblock %}

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

<div class="stat bg-base-100 shadow rounded-box mb-6 w-fit">
  <div class="stat-title">Current Balance</div>
  <div class="stat-value text-primary">{{ business.currency }} {{ account.balance|floatformat:0 }}</div>
  <div class="stat-desc">{{ account.get_account_type_display }}</div>
</div>

<div class="card bg-base-100 shadow">
  <div class="card-body">
    <h2 class="card-title text-base">Transaction History</h2>
    <table class="table table-sm">
      <thead>
        <tr><th>Type</th><th>Direction</th><th>Amount</th><th>Description</th><th>Date</th></tr>
      </thead>
      <tbody>
        {% for tx in transactions %}
        <tr>
          <td><span class="badge badge-ghost badge-sm">{{ tx.get_tx_type_display }}</span></td>
          <td>
            {% if tx.direction == 'in' %}
              <span class="text-success font-bold">↑ In</span>
            {% else %}
              <span class="text-error font-bold">↓ Out</span>
            {% endif %}
          </td>
          <td class="{% if tx.direction == 'in' %}text-success{% else %}text-error{% endif %} font-medium">
            {{ business.currency }} {{ tx.amount|floatformat:0 }}
          </td>
          <td class="text-base-content/60">{{ tx.description|default:"—" }}</td>
          <td>{{ tx.date|date:"d M Y" }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-base-content/40">No transactions yet</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}