{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Ledger - {{ supplier.name }}</h2>
    <a class="btn-primary" href="{{ url_for('supplier_payment', supplier_id=supplier.id) }}">Record Payment</a>
  </div>
  
  <div class="card" style="margin-top:8px">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px;">
      <div>
        <h3>Supplier Info</h3>
        <p><strong>Name:</strong> {{ supplier.name }}</p>
        <p><strong>Email:</strong> {{ supplier.email }}</p>
        <p><strong>Company:</strong> {{ supplier.company_name or '-' }}</p>
        <p><strong>Phone:</strong> {{ supplier.phone or '-' }}</p>
      </div>
    </div>
    
    <table class="table supplier-ledger-table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Description</th>
          <th>Type</th>
          <th class="highlight-debit">Debit</th>
          <th class="highlight-credit">Credit</th>
          <th class="highlight-balance">Balance</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in entries %}
          <tr>
            <td>{{ entry.date.strftime('%Y-%m-%d') }}</td>
            <td>{{ entry.description }}</td>
            <td>
              <span class="entry-type {{ entry.type }}">
                {{ entry.type|capitalize }}
              </span>
            </td>
            <td class="highlight-debit">{{ entry.debit|currency if entry.debit > 0 else '-' }}</td>
            <td class="highlight-credit">{{ entry.credit|currency if entry.credit > 0 else '-' }}</td>
            <td class="highlight-balance">{{ entry.balance|currency }}</td>
          </tr>
        {% else %}
          <tr><td colspan="6" class="muted">No entries found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}