{% extends "vouch/base-bs5.html" %}
{% load i18n %}
{% load humanize %}
{% block content %}
    <h2>{% translate "People You've Vouched For" %}</h2>
    <table class="table table-striped w-100" id="vouched-for-table">
        <thead>
            <tr>
                <th>{% translate "Character" %}</th>
                <th>{% translate "Scope" %}</th>
                <th>{% translate "Vouched On" %}</th>
            </tr>
        </thead>
    </table>

    <h2>{% translate "People Who've Vouched For You" %}</h2>
    <table class="table table-striped w-100" id="vouched-by-table">
        <thead>
            <tr>
                <th>{% translate "Character" %}</th>
                <th>{% translate "Scope" %}</th>
                <th>{% translate "Vouched On" %}</th>
            </tr>
        </thead>
    </table>
{% endblock content %}

{% block extra_javascript %}
    {{ block.super }}
    <script>
        $(document).ready(() => {
            $('#vouched-for-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{% url "vouch:vouched_for_table" %}',
                    error: (xhr, error) => console.error('Error fetching data:', xhr, error)
                },
                order: [[2, "desc"]],
                pageLength: 25,
            });

            $('#vouched-by-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{% url "vouch:vouched_by_table" %}',
                    error: (xhr, error) => console.error('Error fetching data:', xhr, error)
                },
                order: [[2, "desc"]],
                pageLength: 25,
            });
        });
    </script>
{% endblock extra_javascript %}