<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trial Balance - {{ date|date:"F j, Y" }}</title>
    <style>
        body { font-family: Arial, sans-serif; }
        h1 { color: #333; text-align: center; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th { background-color: #343a40; color: white; text-align: left; }
        td, th { padding: 8px; border: 1px solid #ddd; }
        .text-end { text-align: right; }
        .total-row { font-weight: bold; }
        .footer { margin-top: 30px; font-size: 0.8em; text-align: right; }
    </style>
</head>
<body>
    <h1>Trial Balance</h1>
    <h3>As of {{ date|date:"Y-m-d" }}</h3>
    
    <table>
        <thead>
            <tr>
                <th>Account Code</th>
                <th>Account Name</th>
                <th class="text-end">Debit</th>
                <th class="text-end">Credit</th>
            </tr>
        </thead>
        <tbody>
            {% for account in accounts %}
            <tr>
                <td>{{ account.code }}</td>
                <td>{{ account.name }}</td>
                <td class="text-end">{{ account.total_debit|default:"0.00"|floatformat:2 }}</td>
                <td class="text-end">{{ account.total_credit|default:"0.00"|floatformat:2 }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr class="total-row">
                <td colspan="2">Total</td>
                <td class="text-end">{{ total_debit|floatformat:2 }}</td>
                <td class="text-end">{{ total_credit|floatformat:2 }}</td>
            </tr>
        </tfoot>
    </table>
    
    <div class="footer">
        Generated on {{ now|date:"F j, Y H:i" }}
    </div>
</body>
</html>