{% extends 'base.html' %}
{% block content %}
  <h2>Record Payment - {{ supplier.name }}</h2>
  
  <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>
        <h3>Current Balance</h3>
        <p class="balance-amount">{{ balance|currency }}</p>
        <p class="muted">Amount payable to supplier</p>
      </div>
    </div>
    
    <form method="post" class="form">
      {{ form.hidden_tag() }}
      
      <div class="field">
        {{ form.date.label(class="label") }}
        {{ form.date(class="form-control") }}
      </div>
      
      <div class="field">
        {{ form.amount.label(class="label") }}
        {{ form.amount(class="form-control") }}
      </div>
      
      <div class="field">
        {{ form.account_id.label(class="label") }}
        {{ form.account_id(class="form-control") }}
      </div>
      
      <div class="field">
        {{ form.description.label(class="label") }}
        {{ form.description(class="form-control") }}
      </div>
      
      <div class="actions">
        {{ form.submit(class="btn-primary") }}
        <a href="{{ url_for('supplier_ledger', supplier_id=supplier.id) }}" class="btn-outline">Cancel</a>
      </div>
    </form>
  </div>
{% endblock %}