{% 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>
        </tr>
    </thead>
    <tbody>
        {% for member in members %}
            <tr>
                <th>
                    <span class="d-block">
                        <img src="{{ member.character.character_id|character_portrait_url:32 }}" </span>
                        {{ member.character }}
                    </th>
                    <th>
                        <span class="d-block">
                            <img src="{{ member.ship_type.id|type_icon_url:32 }}" </span>
                            {{ member.ship_type }}
                        </th>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <script>
    $(document).ready(() => {
        $('#userDetailsTable').DataTable({
            order: [[0, "asc"]],
        })
    })
        </script>
