{% load i18n %}
{% load evelinks %}
<ul class="list-group col-lg-4 p-2">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        {% if user.profile.main_character %}
            {{ user.profile.main_character }}
        {% else %}
            {% translate "Orphan characters" %}
        {% endif %}
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        {% translate "Character count" %}:
        <span class="badge bg-primary rounded-pill">{{ members|length }}</span>
    </li>
</ul>
<table class="table table-striped table-hover" id="userDetailsTable">
    <thead>
        <tr>
            <th>{% translate "Character" %}</th>
            <th>{% translate "Ship type" %}</th>
            <th>{% translate "Corporation" %}</th>
            <th>{% translate "Alliance" %}</th>
        </tr>
    </thead>
    <tbody>
        {% for member in members %}
            <tr>
                <th>
                    <span class="d-block">
                        <img src="{{ member.character.character_id|character_portrait_url:32 }}">
                        {{ member.character }}
                    </span>
                </th>
                <th>
                    <span class="d-block">
                        <img src="{{ member.ship_type.id|type_icon_url:32 }}">
                        {{ member.ship_type }}
                    </span>
                </th>
                <th>{{ member.character.corporation_name }}</th>
                <th>{{ member.character.alliance_name }}</th>
            </tr>
        {% endfor %}
    </tbody>
</table>
<script>
    $(document).ready(() => {
        $('#userDetailsTable').DataTable({
            order: [[0, "asc"]],
            filterDropDown: {
                columns: [
                    {
                        idx: 2,
                        title: "{% translate "Corporation" %}",
                        maxWidth: "10em",
                    },
                    {
                        idx: 3,
                        title: "{% translate "Alliance" %}",
                        maxWidth: "10em",
                    },
                ],
                bootstrap: true,
                bootstrap_version: 5,
            }
        })
    })
</script>