{% extends "allianceauth/base-bs5.html" %}

{% load aa_i18n i18n navactive static %}

{% block page_title %}
    {{ group }} {% translate "Audit Log" %}
{% endblock page_title %}

{% block header_nav_brand %}
    {% translate "Audit Log" %} - {{ group.name }}
{% endblock header_nav_brand %}

{% block header_nav_collapse_left %}
    <li class="nav-item">
        <a class="nav-link {% navactive request 'groupmanagement:management' %}" href="{% url 'groupmanagement:management' %}">{% translate "Back" %}</a>
    </li>
{% endblock header_nav_collapse_left %}

{% block content %}
    <div class="groupmanagement-audit-datatable-filters">
        <p class="mb-1 fw-bold">{% translate "Filter by" %}:</p>

        <div class="align-items-center d-flex flex-wrap gap-3 mb-3">
            <!-- User filter -->
            <div>
                <label for="filter-requestor" class="col-auto">{% translate "Requestor" %}</label>
                <select id="filter-requestor" class="form-select w-auto">
                    <option value="">{% translate "All requestors" %}</option>

                    {% for requestor in filter.requestors %}
                        <option value="{{ requestor.0 }}">{{ requestor.1 }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Character filter -->
            <div>
                <label for="filter-character" class="col-auto">{% translate "Character name" %}</label>
                <select id="filter-character" class="form-select w-auto">
                    <option value="">{% translate "All characters" %}</option>

                    {% for character in filter.character_names %}
                        <option value="{{ character.0 }}">{{ character.1 }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Corporation filter -->
            <div>
                <label for="filter-corporation" class="col-auto">{% translate "Corporation name" %}</label>
                <select id="filter-corporation" class="form-select w-auto">
                    <option value="">{% translate "All corporations" %}</option>

                    {% for corporation in filter.corporation_names %}
                        <option value="{{ corporation.0 }}">{{ corporation.1 }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Type filter -->
            <div>
                <label for="filter-type" class="col-auto">{% translate "Type" %}</label>
                <select id="filter-type" class="form-select w-auto">
                    <option value="">{% translate "All types" %}</option>

                    {% for type in filter.types %}
                        <option value="{{ type.0 }}">{{ type.1 }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Action filter -->
            <div>
                <label for="filter-action" class="col-auto">{% translate "Action" %}</label>
                <select id="filter-action" class="form-select w-auto">
                    <option value="">{% translate "All actions" %}</option>

                    {% for action in filter.actions %}
                        <option value="{{ action.0 }}">{{ action.1 }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Actor filter -->
            <div>
                <label for="filter-actor" class="col-auto">{% translate "Actor" %}</label>
                <select id="filter-actor" class="form-select w-auto">
                    <option value="">{% translate "All actors" %}</option>

                    {% for actor in filter.actors %}
                        <option value="{{ actor.0 }}">{{ actor.1 }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped" id="log-entries">
            <thead>
                <tr>
                    <th scope="col">{% translate "Date/Time" %}</th>
                    <th scope="col">{% translate "Requestor" %}</th>
                    <th scope="col">{% translate "Character" %}</th>
                    <th scope="col">{% translate "Corporation" %}</th>
                    <th scope="col">{% translate "Type" %}</th>
                    <th scope="col">{% translate "Action" %}</th>
                    <th scope="col">{% translate "Actor" %}</th>
                </tr>
            </thead>

            <tbody></tbody>
        </table>

        <p class="text-muted">
            {% translate "All times displayed are EVE/UTC." %}
        </p>
    </div>
{% endblock content %}

{% block extra_javascript %}
    {% include 'bundles/datatables-2-js-bs5.html' %}
    {% include 'bundles/datatables-2-responsive-js.html' %}
    {% include "bundles/datatables-2-columncontrol-js-bs5.html" %}

    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}

    <script>
        $(document).ready(() => {
            /* global DataTable */

            'use strict';

            const customDtFilter = {
                requestor: $('#filter-requestor'),
                character: $('#filter-character'),
                corporation: $('#filter-corporation'),
                type: $('#filter-type'),
                action: $('#filter-action'),
                actor: $('#filter-actor')
            };

            const dtOptions = {
                language: {
                    url: '{{ DT_LANG_PATH }}',
                    processing: `{% include "framework/datatables/process-indicator.html" %}`
                },
                layout: {
                    topStart: 'pageLength',
                    topEnd: 'search',
                    bottomStart: 'info',
                    bottomEnd: 'paging'
                },
                ordering: {
                    handler: true,
                    indicators: false,
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{% url "groupmanagement:audit_log_table_data" group_id=group.pk %}',
                    type: 'POST',
                    headers: {'X-CSRFToken': '{{ csrf_token }}'},
                    data: (data) => {
                        const mappedFilters = Object.fromEntries(
                            Object.entries(customDtFilter).map(([key, $el]) => [`filter_${key}`, $el.val()])
                        );

                        return {...data, ...mappedFilters};
                    },
                    error: (xhr, error) => console.error('Error fetching data:', xhr, error)
                },
                columnDefs: [
                    {
                        targets: [0],
                        columnControl: [{
                            target: 0,
                            content: ['order']
                        }],
                        searchable: false
                    },
                    {
                        targets: [1, 2, 3, 4, 5, 6],
                        columnControl: [
                            {
                                target: 0,
                                content: ['order']
                            },
                            {
                                target: 1,
                                content: ['search']
                            }
                        ],
                    }
                ],
                order: [
                    [0, "desc"]
                ],
                pageLength: 10,
                responsive : true
            };

            const table_log_entries = new DataTable($('#log-entries'), {
                ...dtOptions,
                initComplete: () => {
                    // Redraw table when filter values change
                    Object.values(customDtFilter).forEach((filter) => {
                        filter.on('change', () => table_log_entries.draw());
                    });
                }
            });
        });
    </script>
{% endblock extra_javascript %}

{% block extra_css %}
    {% include 'bundles/datatables-2-css-bs5.html' %}
    {% include 'bundles/datatables-2-responsive-css.html' %}
    {% include "bundles/datatables-2-columncontrol-css-bs5.html" %}
{% endblock extra_css %}