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

{% block page_title %}Events{% endblock %}
{% block vow_menu %}{% include 'ledger/events/menu.html' %}{% endblock %}

{% block vow_block %}
<div class="card-body card-primary">
    <div class="card-body bg-primary rounded-top"><h3>{% translate "Corp Events" %}</h3></div>
    <div class="card-body bg-secondary table-responsive">
        <table id="eventsTable" class="table table-striped table-hover table-width-fix">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Description</th>
                    <th>Char Ledger</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody id="events">
                <tr>
                    <td colspan="7"><h3>Loading...</h3></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{% include 'bundles/datatables-js-bs5.html' %}
<script>
$(document).ready(function() {
    loadEvents();
});

function loadEvents() {
    $.ajax({
        url: '{% url "ledger:load_events" %}',
        type: 'GET',
        success: function(data) {
            var tableBody = $('#events');
            tableBody.empty();  // Löschen Sie alle vorhandenen Zeilen

            // Fügen Sie für jedes empfangene Event eine Zeile hinzu
            $.each(data, function(index, event) {
                var row = $('<tr>');
                row.append($('<td>').text(event.title));
                row.append($('<td>').text(event.date_start));
                row.append($('<td>').text(event.date_end));
                row.append($('<td>').text(event.description));
                row.append($('<td>').text(event.char_ledger));
                row.append($('<td>').text(event.location));

                // Färben Sie die Zeile basierend auf dem Wert von 'upcoming'
                if (event.upcoming) {
                    row.addClass('upcoming-event');  // Graue Farbe
                } else {
                    row.addClass('past-event');  // Hellgrüne Farbe
                }

                tableBody.append(row);
            });
            // Anwenden der DataTables-Funktionalität auf die Tabelle
            $('#eventsTable').DataTable({
                "order": [[ 1, "desc" ]]  // Sortieren nach der zweiten Spalte (Startdatum) in absteigender Reihenfolge
            });
        }
    });
}
</script>
{% endblock %}

{% block extra_css %}
<style>
.past-event {
    text-decoration: line-through;
}
</style>
    {% include "ledger/bundles/ledger-css.html" %}
{% endblock %}
