{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>{{ account.name }} ({{ account.type|capitalize }})</h2>
  </div>
  
  <!-- Current Balance Display -->
  <div class="card" style="margin-bottom: 16px;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">Current Balance</h3>
      <div style="font-size: 1.5em; font-weight: bold; color: {% if balance > 0 %}green{% else %}red{% endif %};">
        {{ balance|currency }}
      </div>
    </div>
    <p style="margin: 8px 0 0 0; color: #666; font-weight: bold;">
      {% if balance > 0 %}
        Account has {{ balance|currency }} available
      {% else %}
        Account is overdrawn by {{ (balance * -1)|currency }}
      {% endif %}
    </p>
    <div style="display: flex; gap: 8px; margin-top: 12px;">
      <a class="btn-primary" href="{{ url_for('deposit_account', account_id=account.id) }}" style="background-color: #059669; border-color: #059669;">
        💰 Deposit
      </a>
      <a class="btn-outline" href="{{ url_for('withdraw_account', account_id=account.id) }}" style="color: #dc2626; border-color: #dc2626;">
        💸 Withdraw
      </a>
      <a class="btn-outline" href="{{ url_for('edit_account', account_id=account.id) }}">
        ✏️ Edit Account
      </a>
    </div>
  </div>

  <!-- Transaction History -->
  <div class="card">
    <h3>Transaction History</h3>
    {% if txns %}
      <table class="table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Amount</th>
            <th>Customer</th>
            <th>Balance</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% set running_balance = account.opening_balance or 0 %}
          {% for t in txns %}
            {% set running_balance = running_balance + (t.amount or 0) %}
            <tr style="background-color: {% if t.amount > 0 %}#f0fdf4{% else %}#fef2f2{% endif %};">
              <td>{{ t.date|date_format }}</td>
              <td>{{ t.description }}</td>
              <td style="font-weight: 600; color: {% if t.amount > 0 %}green{% else %}red{% endif %};">
                {{ t.amount|currency }}
              </td>
              <td>{{ t.ref_customer.name if t.ref_customer else '-' }}</td>
              <td style="font-weight: 600; color: {% if running_balance > 0 %}green{% else %}red{% endif %};">
                {{ running_balance|currency }}
              </td>
              <td class="actions">
                <a class="btn-outline btn-sm" href="{{ url_for('edit_account_txn', txn_id=t.id) }}">Edit</a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr style="background-color: #f8f9fa; font-weight: bold;">
            <th colspan="4">Final Balance</th>
            <th style="color: {% if balance > 0 %}green{% else %}red{% endif %};">
              {{ balance|currency }}
            </th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    {% else %}
      <p style="text-align: center; color: #666; padding: 20px;">
        No transactions found in this account.
      </p>
    {% endif %}
  </div>
{% endblock %}