{% load i18n %}
{% load evelinks %}

<div class="card">
    <div class="card-header">
        {% translate 'Characters' %}
    </div>
    <div class="card-body">
        <!-- Characters -->
        <div class="character-cards">
            <ul class="cards_container">
                <!-- Add New Character -->
                <li class="cards_item">
                    <div class="card bg-secondary">
                        <div class="card-header">{% translate 'Register Character' %}</div>

                        <div class="card-body card__content">
                            <a href="{% url 'memberaudit:add_character' %}">
                                <img src="{{ 1|character_portrait_url:256 }}" alt="Add character">
                            </a>
                        </div>

                        <div class="card-footer">
                            <a
                                class="btn btn-primary btn-sm"
                                href="{% url 'memberaudit:add_character' %}"
                                title="{% translate 'Register a character' %}",
                            >{% translate 'Register' %}</a>
                        </div>
                    </div>
                </li>

                {% if has_registered_characters %}
                    <!-- Registered Characters -->
                    {% for auth_character in auth_characters|dictsort:"character_name" %}
                        {% include 'memberaudit/partials/launcher/character_card.html' %}
                    {% endfor %}
                {% endif %}
            </ul>
        </div>

        {% if characters_need_token_refresh|length > 0 %}
            <p class="text-warning">
                <strong>
                    <i class="fas fa-exclamation-triangle"></i>
                {% translate 'Please re-register characters with issues:' %}&nbsp;&nbsp;</strong>
                {{ characters_need_token_refresh|join:", " }}
            </p>
        {% endif %}

        {% if unregistered_chars|length > 0 %}
            <p class="text-warning">
                <strong>
                    <i class="fas fa-exclamation-triangle"></i>
                {% translate 'Please register unregistered characters:' %}&nbsp;&nbsp;</strong>
                {{ unregistered_chars|join:", " }}
            </p>
        {% endif %}

        <p class="text-muted">
            <i class="fas fa-crown"></i> {% translate 'Main character' %}&nbsp;|&nbsp;
            <i class="far fa-eye"></i> {% translate 'Currently shared with others' %}&nbsp;|&nbsp;
            ⬤ {% translate 'Update status' %}
        </p>
    </div>
</div>