{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Cash & Bank</h2>
    <a class="btn-primary" href="{{ url_for('new_account') }}">New Account</a>
  </div>
  
  <!-- Live Search -->
  <div class="card" style="margin-top:8px; margin-bottom:8px;">
    <input type="text" id="account-search" placeholder="🔍 Search accounts by name, type, balance, status..." 
           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
  </div>
  
  <div class="card" style="margin-top:8px">
    <table class="table" id="accounts-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Balance</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for a in accounts %}
          {% set account_balance = balances[a.id] if balances and a.id in balances else 0 %}
          <tr style="background-color: {% if account_balance > 0 %}#f0fdf4{% elif account_balance < 0 %}#fef2f2{% else %}#f8f9fa{% endif %};">
            <td><strong>{{ a.name }}</strong></td>
            <td>{{ a.type|capitalize }}</td>
            <td style="font-weight: 600; color: {% if account_balance > 0 %}green{% elif account_balance < 0 %}red{% else %}#666{% endif %};">
              {{ account_balance|currency }}
            </td>
            <td>
              {% if account_balance > 0 %}
                <span style="color: green; font-weight: 500;">Positive Balance</span>
              {% elif account_balance < 0 %}
                <span style="color: red; font-weight: 500;">Overdrawn</span>
              {% else %}
                <span style="color: #666;">Zero Balance</span>
              {% endif %}
            </td>
            <td>
              <div style="display: flex; gap: 4px;">
                <a class="btn-outline" href="{{ url_for('account_view', account_id=a.id) }}">View</a>
                <a class="btn-outline" href="{{ url_for('edit_account', account_id=a.id) }}" style="color: #2563eb; border-color: #2563eb;">✏️ Edit</a>
                <form method="post" action="{{ url_for('delete_account', account_id=a.id) }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this account? This action cannot be undone. Accounts with transactions cannot be deleted.');">
                  <button type="submit" class="btn-outline" style="color: #dc2626; border-color: #dc2626;">🗑️ Delete</button>
                </form>
              </div>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="5" class="muted">No accounts yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('account-search', 'accounts-table');
    });
  </script>
{% endblock %}