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

<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">{{ status_label }}</div>
            </div>
        </div>

        <div class="small text-muted mb-1">Required {{ progress.required_pct }}% · {{ required_missing_sp|intcomma }} 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">Recommended {{ progress.recommended_pct }}% · {{ recommended_missing_sp|intcomma }} 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>{{ action_label|default:'Open pilot focus' }}
        </a>
        {% endif %}
    </div>
</div>