{% extends 'killstats/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block killstats_block %}

<div class="bg-primary rounded-top px-2 py-2 mb-4">
    <h3 class="text-white">{% translate "Killstats Corporation Overview" %}</h3>
</div>
<div class="card-body">
    <div class="row">
        <table class="table table-striped table-hover" id="corporations" style="width: 100%;">
            <br>
            <thead>
                <th class="col-portrait" style="width: 10%;"></th>
                <th class="col-group" style="width: 20%;">Corporation</th>
                <th class="col-actions" style="width: 10%;">Actions</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
{% include 'bundles/datatables-js-bs5.html' %}
<script type="application/javascript">
CorpsAjax = {
    url: '/killstats/api/killboard/corporation/admin/',
    type: 'GET',
    success: function(response) {

        // Data Structure
        var data = Object.values(response[0].corporation).map(function(item) {
            return {
                corporation_id: item.corporation_id,
                corporation_name: item.corporation_name,
            };
        });

        // Initialisierung der DataTable
        var Corps = $('#corporations').DataTable({
            data: data,
            columns: [
                {data: 'corporation_id', title: ''},
                {data: 'corporation_name', title: 'Corporation'},
            ],
            columnDefs: [
                {
                    targets: 0,
                    render: function (_, __, row) {
                        return '<img src="https://images.evetech.net/corporations/' + row.corporation_id + '/logo?size=32" class="rounded-circle" title="' + row.corporation_name + '" height="30" data-tooltip-toggle="corp-tooltip" data-bs-placement="top">';
                    },
                    sortable: false,
                },
                {
                    targets: 2,
                    className: 'text-end',
                    sortable: false,
                    render: function (_, __, row) {
                        return `
                        <a href="/killstats/corporation/${row.corporation_id}/">
                        <button class="btn btn-primary btn-sm" title="{% trans "Show" %}" data-tooltip-toggle="corp-tooltip" data-bs-placement="left">
                            <i class="fa-solid fa-eye"></i>
                        </button>
                        </a>
                        `;
                    },
                }
            ],
            order: [[1, 'asc']],
            initComplete: function() {
                $('[data-tooltip-toggle="corp-tooltip"]').tooltip({
                    trigger: 'hover',
                });
            },
            drawCallback: function() {
                $('[data-tooltip-toggle="corp-tooltip"]').tooltip({
                    trigger: 'hover',
                });
            }
        });
    },
    error: function(response) {
    // Annahme: Ihr DataTable hat 3 Spalten
    var errorRow = '<tr><td colspan="3" class="text-center">{% trans 'No Permission' %}</td></tr>';

    // Fügt die Fehlerzeile in die Tabelle ein. Stellen Sie sicher, dass die ID oder Klasse Ihrer Tabelle korrekt ist.
    $('#corporations tbody').html(errorRow);
    }
};

document.addEventListener('DOMContentLoaded', function () {
    // DataTable mit AJAX-Daten initialisieren
    $.ajax(CorpsAjax);
});
</script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
