{% load i18n %}
{% load static %}
{% load evelinks %}
{% load humanize %}

{% if payment_details %}
    <h4 class="d-none" id="modal-title">
        {% translate "Payments for" %}:
            <img src="{{ character.character_id|character_portrait_url:32 }}" class="rounded-circle">
            {{ character.character_name }}
    </h4>
    <header class="card-header bg-primary rounded-top">
        <h3 class="me-3">{% trans "Payments" %}</h3>
    </header>
    <input type="hidden" id="modal-hidden-url" value="">
    <div class="card-body bg-secondary rounded-bottom mb-3">
        <table class="table table-dark table-striped table-hover w-100" id="payments">
            <thead>
                <tr>
                    <th scope="col">{% translate "ISK" %}</th>
                    <th scope="col">{% translate "Date" %}</th>
                    <th scope="col">{% translate "Status" %}</th>
                    <th scope="col">{% translate "Edited by" %}</th>
                    <th scope="col">{% translate "Reason" %}</th>
                    <th scope="col">{% translate "Division" %}</th>
                    <th scope="col">{% 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>
    <script>
        $(document).ready(() => {
            const paymentsViewCharacterTableVar = $('#payments');

            const tablePayments = paymentsViewCharacterTableVar.DataTable({
                "order": [[ 1, "desc" ]],
                "columnDefs": [
                    {
                        targets: 0,
                        render: {
                            display: function (data, _, __) {
                                return numberFormatter({
                                    value: data,
                                    options: {
                                        style: 'currency',
                                        currency: 'ISK'
                                    }
                                });
                            },
                            filter: function (data, _, __) { return data; },
                            _: function (data, _, __) { return data; }
                        }
                    },
                    { "orderable": false, "targets": 5 }
                ]
            });

            tablePayments.on('draw', function (row, data) {
                $('[data-tooltip-toggle="taxsystem-tooltip"]').tooltip({
                    trigger: 'hover',
                });
            });

            // Tooltip
            $('[data-tooltip-toggle="taxsystem-tooltip"]').tooltip({
                trigger: 'hover',
            });
        });
    </script>
{% else %}
    {% translate "No character found." %}
{% endif %}