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

{% block page_title %}
    {{ title }} ⋗ {% translate "Doctrine Checker" %}
{% endblock %}

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

{% block view_block %}

<div class="bg-primary rounded-top px-2 py-2 mb-4">
    <h3 class="text-white">{% translate "Corporation Overview" %}</h3>
</div>
<div class="card-body">
    <div class="row">
        <table class="table table-striped table-hover" id="accounts-overview-table" 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-ally-portrait" style="width: 10%;"></th>
                <th class="col-group" style="width: 20%;">Alliance</th>
                <th class="col-actions" style="width: 10%;">{% trans "Actions" %}</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
{% include 'bundles/datatables-js-bs5.html' %}
    <script type="application/javascript">
        $(document).ready(function() {
            const AdminUrl = "{% url 'madc:api:get_corporation_overview' %}"
            let CorporationOverviewUrl = "{% url 'madc:corporation_checker' corporation_id=1337 %}"
            const accountOverviewTableVar = $('#accounts-overview-table');
            // Initialisierung der DataTable
            const tableAccount = accountOverviewTableVar.DataTable({
                ajax: {
                    url: AdminUrl,
                    type: 'GET',
                    dataSrc: function (data) {
                        return data;
                    },
                    error: function (xhr, error, thrown) {
                        console.error('Error loading data:', error);
                        tableSkilllist.clear().draw();
                    }
                },
                columns: [
                    { data: 'corporation.corporation_id' },
                    { data: 'corporation.corporation_name' },
                    { data: 'corporation.alliance_id' },
                    { data: 'corporation.alliance_name' },
                    { data: 'actions' },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        render: function (data, type, row) {
                            return '<img src="https://images.evetech.net/corporations/' + row.corporation.corporation_id + '/logo?size=32" class="rounded-circle" title="' + row.corporation.corporation_name + '" height="30" data-tooltip-toggle="madc-tooltip" data-bs-placement="top">';
                        },
                        sortable: false,
                    },
                    {
                        targets: 2,
                        render: function (data, type, row) {
                            return '<img src="https://images.evetech.net/alliances/' + row.corporation.alliance_id + '/logo?size=32" class="rounded-circle" title="' + row.corporation.alliance_name + '" height="30" data-tooltip-toggle="madc-tooltip" data-bs-placement="top">';
                        },
                        sortable: false,
                    },
                    {
                        targets: 4,
                        className: 'text-end',
                        sortable: false,
                        render: function (data, type, row) {
                            var OverviewUrl = CorporationOverviewUrl.replace('1337', row.corporation.corporation_id);
                            return `<a href="${OverviewUrl}">
                                <button class="btn btn-primary btn-sm"
                                    title="{% trans "Show" %}"
                                    data-tooltip-toggle="madc-tooltip"
                                    data-bs-placement="left"
                                >
                                    <i class="fa-solid fa-eye"></i>
                                </button>
                            </a>`;
                        },
                    }
                ],
                order: [[1, 'asc']],
            });

            tableAccount.on('draw', function (row, data) {
                $('[data-tooltip-toggle="madc-tooltip"]').tooltip({
                    trigger: 'hover',
                });
            });
        });
    </script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
