{% load i18n %}
<div class="col-12 col-xl-8 align-self-stretch p-2">
    <div class="card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <h4 class="ms-auto me-auto">
                    {% translate "Characters" %}
                </h4>
            </div>
            <div class="card-body">
                <div style="height: 300px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
                <div class="d-flex">
                    <a href="{% url 'authentication:add_character' %}" class="btn btn-primary flex-fill m-1" title="{% translate 'Add Character' %}"><span class="d-md-inline m-2">{% translate 'Add Character' %}</span></a>
                    <a href="{% url 'authentication:change_main_character' %}" class="btn btn-primary flex-fill m-1" title="{% translate 'Change Main' %}"></span><span class="d-md-inline m-2">{% translate 'Change Main' %}</span></a>
                </div>
                <table class="table" style="--bs-table-bg: transparent;">
                    <thead>
                        <tr>
                            <th class="text-center"></th>
                            <th class="text-center">{% translate "Name" %}</th>
                            <th class="text-center">{% translate "Corp" %}</th>
                            <th class="text-center">{% translate "Alliance" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for char in characters %}
                            <tr>
                                <td class="text-center"><img class="ra-avatar rounded-circle" src="{{ char.portrait_url_32 }}">
                                </td>
                                <td class="text-center">{{ char.character_name }}</td>
                                <td class="text-center">{{ char.corporation_name }}</td>
                                <td class="text-center">{{ char.alliance_name|default_if_none:"" }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>