{% extends 'ledger/base.html' %}
{% load i18n %}

{% block page_template_title %}
    {{ title }}
{% endblock page_template_title %}

{% block page_topic %}
    <h1 class="page-header text-center">
        {{ title }}
    </h1>
{% endblock page_topic %}

{% block ledger_block %}
    <div class="bg-primary rounded-top px-2 py-2 mb-4">
        <h3 class="text-white">{% translate "Account Overview" %}</h3>
    </div>
    <div id="ledger-index" class="card-body rounded-bottom fade">
        <div class="card-body bg-secondary table-responsive">
            <div class="row">
                <table class="table table-dark table-striped table-hover w-100" id="members">
                    <br>
                    <thead>
                        <th class="col-portrait" style="width: 10%;"></th>
                        <th class="col-user" style="width: 20%;">Character</th>
                        <th class="col-group" style="width: 20%;">Corporation</th>
                        <th class="col-actions" style="width: 10%;">{% trans "Actions" %}</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
{% include 'bundles/datatables-js-bs5.html' %}
<script type="application/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const AdminUrl = "{% url 'ledger:api:get_character_overview' %}"
        let CharacterOverviewUrl = "{% url 'ledger:character_ledger' character_id=1337 %}"

        const tableContainer = $('#members');
        const tableOverview = tableContainer.DataTable(
            {
                ajax: {
                    url: AdminUrl,
                    dataSrc: function(json) {
                        return Object.values(json[0].character);
                    }
                },
                columns: [
                    {data: 'character_id', title: ''},
                    {data: 'character_name', title: 'Character'},
                    {data: 'corporation_name', title: 'Corporation'},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        render: function (data, type, row) {
                            return '<img src="https://images.evetech.net/characters/' + row.character_id + '/portrait?size=32" class="rounded-circle" title="' + row.character_name + '" height="30" data-tooltip-toggle="char-tooltip" data-bs-placement="top">';
                        },
                        sortable: false,
                    },
                    {
                        targets: 3,
                        className: 'text-end',
                        sortable: false,
                        render: function (data, type, row) {
                            var OverviewUrl = CharacterOverviewUrl.replace('1337', row.character_id);
                            return `<a href="${OverviewUrl}">
                                <button class="btn btn-primary btn-sm"
                                    title="{% trans "Show" %}"
                                    data-tooltip-toggle="char-tooltip"
                                    data-bs-placement="left"
                                >
                                    <i class="fa-solid fa-eye"></i>
                                </button>
                            </a>`;
                        },
                    }
                ],
                order: [[1, 'asc']],
                initComplete: function() {
                    $('[data-tooltip-toggle="char-tooltip"]').tooltip({
                        trigger: 'hover',
                    });
                    $('#ledger-index').addClass('show');
                },
                drawCallback: function() {
                    $('[data-tooltip-toggle="char-tooltip"]').tooltip({
                        trigger: 'hover',
                    });
                }
            }
        );
    });
</script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
