{% load i18n %}
<div class="card mb-3">
    <div class="card-header bg-primary rounded-top">
        <h3 class="me-3">{% translate "Payments" %}</h3>
    </div>
    <div class="card-body bg-secondary rounded-bottom">
        <table class="table tax-table-hover w-100" id="payments-table">
            <thead>
                <tr>
                    <th class="w-auto">{% translate "ISK" %}</th>
                    <th class="w-auto">{% translate "Date" %}</th>
                    <th class="w-auto">{% translate "Status" %}</th>
                    <th class="w-auto">{% translate "Edited by" %}</th>
                    <th class="w-auto">{% translate "Reason" %}</th>
                    <th class="w-auto">{% translate "Division" %}</th>
                    <th class="w-auto">{% translate "Actions" %}</th>
                </tr>
            </thead>
            <tbody class="modal-payments-table-body">
                {% for payment in payment_details %}
                    <tr>
                        <td>{{ payment.amount }}</td>
                        <td>{{ payment.date }}</td>
                        <td>{{ payment.request_status.status }}</td>
                        <td>{{ payment.reviser }}</td>
                        <td>{{ payment.reason }}</td>
                        <td>{{ payment.division_name }}</td>
                        <td>{{ payment.actions|safe }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>