{% load i18n %}
{% load skill_render %}

<div class="mb-3">
    <div><strong>{% translate "Effective mastery:" %}</strong> {{ effective_mastery_label }}</div>
    <div class="small text-muted">
        {% translate "Doctrine default:" %} {{ doctrine_default_mastery_label }}
        {% if fitting_mastery_override is not None %}
        · {% translate "Saved fitting override:" %} {{ fitting_mastery_override }}
        {% endif %}
    </div>
    <div class="small text-muted mt-1 d-flex align-items-center gap-2 flex-wrap">
        <span>{% translate "Recommended plan clone requirement:" %}</span>
        {% if recommended_plan_alpha_compatible %}
        {% include 'mastery/partials/_clone_grade_badge.html' with requires_omega=False %}
        {% else %}
        {% include 'mastery/partials/_clone_grade_badge.html' with requires_omega=True %}
        {% endif %}
        {% if recommended_plan_omega_skill_count %}
        <span>{% blocktranslate with omega=recommended_plan_omega_skill_count total=recommended_plan_skill_count %}{{ omega }}/{{ total }} recommended skills require Omega{% endblocktranslate %}</span>
        {% else %}
        <span>{% translate "Recommended plan remains Alpha compatible." %}</span>
        {% endif %}
    </div>
</div>

{% for group, payload in grouped_skills.items %}
{% with skills=payload.skills %}
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>{{ group }}</span>
        <span class="badge bg-secondary">{{ skills|length }}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-striped mb-0" style="table-layout: fixed; width: 100%;">
                <colgroup>
                    <col style="width: 500px;">
                    <col style="width: 140px;">
                    <col style="width: 160px;">
                </colgroup>
                <thead class="mastery-table-head">
                <tr>
                    <th>{% translate "Skill" %}</th>
                    <th>{% translate "Required" %}</th>
                    <th>{% translate "Recommended" %}</th>
                </tr>
                </thead>
                <tbody>
                {% for skill in skills %}
                {% if not skill.is_blacklisted %}
                <tr>
                    <td>
                        <span>{{ skill.skill_name }}</span>
                        {% if skill.is_manual %}
                        <span class="badge text-bg-info ms-1">{% translate "Manual" %}</span>
                        {% endif %}
                        {% if skill.skill_description %}
                        <button
                                type="button"
                                class="btn btn-link btn-sm p-0 ms-1 align-baseline"
                                data-bs-tooltip="aa-mastery"
                                data-bs-placement="top"
                                data-bs-title="{{ skill.skill_description|striptags }}"
                                aria-label="{% translate 'Skill description' %}"
                        >
                            <span class="badge rounded-pill text-bg-secondary">?</span>
                        </button>
                        {% endif %}
                    </td>
                    <td>{{ skill.required_level|skill_render }}</td>
                    <td>{{ skill.recommended_level|skill_render }}</td>
                </tr>
                {% endif %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endwith %}
{% empty %}
<div class="alert alert-info mb-0">{% translate "No skills found for this fitting at the selected mastery level." %}</div>
{% endfor %}

<script>
    $(document).ready(() => {
        $('[data-bs-tooltip="aa-mastery"]').tooltip();
    });
</script>