{% load evelinks %}
{% load humanize %}
{% load l10n %}
{% load i18n %}

<button
    type="button"
    class="pilot-avatar-btn js-pilot-popover{% if is_selected %} is-selected{% endif %}"
    data-bs-toggle="popover"
    data-bs-trigger="manual"
    data-bs-placement="auto"
    data-aa-popover-target="{{ popover_id }}"
    aria-label="{{ character.eve_character.character_name }}"
>
    <span class="pilot-avatar-ring status-{{ status_bucket }}">
        <img src="{{ character.eve_character|character_portrait_url:32 }}" class="rounded-circle" width="28" height="28" alt="{{ character.eve_character.character_name }}">
    </span>
</button>
<div id="{{ popover_id }}" class="d-none">
    <div class="pilot-popover-card">
        <div class="d-flex align-items-center gap-2 mb-2">
            <img src="{{ character.eve_character|character_portrait_url:64 }}" class="rounded-circle" width="40" height="40" alt="{{ character.eve_character.character_name }}">
            <div>
                <div class="small fw-semibold">{{ character.eve_character.character_name }}</div>
                <div class="small text-muted">
                    {% if status_bucket == 'elite' %}
                    {% translate "Elite" %}
                    {% elif status_bucket == 'almost_elite' %}
                    {% translate "Almost elite" %}
                    {% elif status_bucket == 'can_fly' %}
                    {% translate "Can fly" %}
                    {% elif status_bucket == 'almost_fit' %}
                    {% translate "Almost fit" %}
                    {% elif status_bucket == 'needs_training' %}
                    {% translate "Needs training" %}
                    {% else %}
                    {{ status_label }}
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="small text-muted mb-1">{% translate "Required" %} {{ progress.required_pct }}% · {{ required_missing_sp|intcomma }} {% translate "SP missing" %}</div>
        <div class="progress mb-2" style="height: 6px;">
            <div class="progress-bar bg-success" role="progressbar" style="width: {{ progress.required_pct|unlocalize }}%"></div>
        </div>

        <div class="small text-muted mb-1">{% translate "Recommended" %} {{ progress.recommended_pct }}% · {{ recommended_missing_sp|intcomma }} {% translate "SP missing" %}</div>
        <div class="progress mb-2" style="height: 6px;">
            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ progress.recommended_pct|unlocalize }}%"></div>
        </div>

        {% if action_url %}
        <a class="btn btn-sm btn-outline-{{ action_btn|default:'primary' }} w-100" href="{{ action_url }}">
            <span class="fas fa-external-link-alt me-1" aria-hidden="true"></span>{% if action_label %}{{ action_label }}{% else %}{% translate "Open pilot focus" %}{% endif %}
        </a>
        {% endif %}
    </div>
</div>