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

<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
    <div>
        <h2 class="mb-1">{{ fitting.name }} - {% translate "Skills" %}</h2>
        <p class="text-muted mb-0">{% translate "Doctrine:" %} <a href="{% url 'mastery:doctrine_detail' doctrine.id %}">{{ doctrine.name }}</a>
        </p>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <a class="btn btn-sm btn-outline-primary" href="{% url 'fittings:view_fit' fitting.id %}" target="_blank" rel="noopener">
            {% translate "View fitting" %}
        </a>
        <a class="btn btn-sm btn-outline-secondary" href="{% url 'fittings:view_doctrine' doctrine.id %}" target="_blank" rel="noopener">
            {% translate "View doctrine" %}
        </a>
    </div>
</div>

{% if skillset_id %}
<div class="alert alert-secondary d-flex align-items-center gap-3 mb-3 py-2" role="status">
    <span class="text-success fs-5" aria-hidden="true">&#10003;</span>
    <div>
        <strong>{% translate "MemberAudit SkillSet" %} #{{ skillset_id }}</strong>
        &mdash;
        {% if skillset_skill_count is not None %}
        {% blocktranslate count count=skillset_skill_count %}{{ count }} skill synchronised{% plural %}{{ count }} skills synchronised{% endblocktranslate %}
        {% endif %}
        {% if last_synced_at %}
        &mdash; {% translate "last sync:" %} <span data-bs-tooltip="aa-mastery"
            data-bs-title="{{ last_synced_at|date:'Y-m-d H:i:s' }} UTC">{{ last_synced_at|timesince }} ago</span>
        {% else %}
        &mdash; <em class="text-muted">{% translate "never synced yet" %}</em>
        {% endif %}
    </div>
</div>
{% endif %}

<div class="row g-3 mb-3">
    <div class="col-12 col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">
                <div class="small text-muted mb-1">{% translate "Approval status" %}</div>
                <div class="mb-2"><span class="badge {{ approval_status_badge_class }}">{{ approval_status_label }}</span></div>
                <div class="d-flex flex-wrap gap-2">
                    {% if approval_status != 'approved' %}
                    <form method="post" action="{% url 'mastery:update_fitting_approval_status' fitting.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="approve">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button type="submit" class="btn btn-sm btn-success" {% if not can_approve_plan %}disabled{% endif %}>
                            {% translate "Approve" %}
                        </button>
                    </form>
                    {% endif %}
                    <form method="post" action="{% url 'mastery:update_fitting_approval_status' fitting.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="mark_in_progress">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button type="submit" class="btn btn-sm btn-outline-warning" {% if approval_status == 'in_progress' %}disabled{% endif %}>
                            {% translate "Mark in progress" %}
                        </button>
                    </form>
                    <form method="post" action="{% url 'mastery:update_fitting_approval_status' fitting.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="mark_not_approved">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button type="submit" class="btn btn-sm btn-outline-secondary" {% if approval_status == 'not_approved' %}disabled{% endif %}>
                            {% translate "Mark not approved" %}
                        </button>
                    </form>
                </div>
                {% if not can_approve_plan %}
                <div class="small text-muted mt-2">{% translate "Approval is available after the current skill plan has been synchronised." %}</div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">
                <div class="small text-muted mb-1">{% translate "Approved by" %}</div>
                {% if approved_by_actor and approved_at %}
                <div class="d-flex align-items-center gap-2 mb-1">
                    {% if approved_by_actor.main_character %}
                    <img src="{{ approved_by_actor.main_character|character_portrait_url:32 }}" class="rounded-circle mastery-approval-avatar" width="32" height="32" alt="{{ approved_by_actor.display_name }}">
                    {% endif %}
                    <div class="small lh-sm">
                        <div class="fw-semibold">{{ approved_by_actor.display_name }}</div>
                    </div>
                </div>
                <div class="small text-muted"><span data-bs-tooltip="aa-mastery" data-bs-title="{{ approved_at|date:'Y-m-d H:i:s' }} UTC">{{ approved_at|timesince }} ago</span></div>
                {% else %}
                <div class="small text-muted">{% translate "No approval recorded yet." %}</div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">
                <div class="small text-muted mb-1">{% translate "Last modified" %}</div>
                {% if modified_by_actor and modified_at %}
                <div class="d-flex align-items-center gap-2 mb-1">
                    {% if modified_by_actor.main_character %}
                    <img src="{{ modified_by_actor.main_character|character_portrait_url:32 }}" class="rounded-circle mastery-approval-avatar" width="32" height="32" alt="{{ modified_by_actor.display_name }}">
                    {% endif %}
                    <div class="small lh-sm">
                        <div class="fw-semibold">{{ modified_by_actor.display_name }}</div>
                    </div>
                </div>
                <div class="small text-muted"><span data-bs-tooltip="aa-mastery" data-bs-title="{{ modified_at|date:'Y-m-d H:i:s' }} UTC">{{ modified_at|timesince }} ago</span></div>
                {% elif last_synced_at %}
                <div class="small text-muted">{% translate "Last plan change timestamp is not available for this entry." %}</div>
                {% else %}
                <div class="small text-muted">{% translate "Generate or sync the plan before requesting approval." %}</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-12 col-xl-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">
                <div class="fw-semibold mb-2">{% translate "Add skill manually" %}</div>
                <form method="post" action="{% url 'mastery:add_manual_skill' fitting.id %}"
                    class="d-flex flex-wrap align-items-center gap-2">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                    <input class="form-control form-control-sm" name="skill_name" list="skillNameOptions"
                        placeholder="{% translate 'Skill name (e.g. Thermodynamics)' %}" style="width: 320px;" required>
                    <datalist id="skillNameOptions">
                        {% for skill_name in skill_name_options %}
                        <option value="{{ skill_name }}"></option>
                        {% endfor %}
                    </datalist>
                    <select class="form-select form-select-sm" name="recommended_level" style="width: 130px;" required>
                        {% for level in recommended_choices %}
                        <option value="{{ level }}" {% if level == 4 %}selected{% endif %}>{% translate "Level" %} {{ level }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-sm btn-outline-primary" type="submit">{% translate "Add skill" %}</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">
                <div class="fw-semibold mb-2">{% translate "Apply mastery" %}</div>
                <form method="post" action="{% url 'mastery:update_fitting_mastery' fitting.id %}"
                    class="d-flex flex-wrap align-items-center gap-2">
                    {% csrf_token %}
                    <input type="hidden" name="doctrine_id" value="{{ doctrine.id }}">
                    <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                    <select class="form-select form-select-sm" name="mastery_level" style="width: 220px;">
                        <option value="" {% if fitting_mastery_override is None %}selected{% endif %}>
                            {% blocktranslate with level=doctrine_default_mastery_label %}Use doctrine default ({{ level }}){% endblocktranslate %}
                        </option>
                        {% for value, label in mastery_choices %}
                        <option value="{{ value }}" {% if fitting_mastery_override == value %}selected{% endif %}>{{ label }}
                        </option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn btn-sm btn-outline-primary">{% translate "Apply mastery" %}</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body py-2 px-3">
                <div class="fw-semibold mb-2">{% translate "Training priority" %}</div>
                <div class="small text-muted mb-2 d-flex flex-wrap align-items-center gap-2">
                    <span>{% translate "Doctrine priority:" %}</span>
                    {% if doctrine_priority > 0 %}
                    {% include 'mastery/partials/_priority_badge.html' with priority=doctrine_priority %}
                    {% else %}
                    <span>{% translate "Default" %}</span>
                    {% endif %}
                </div>
                <form method="post" action="{% url 'mastery:update_fitting_priority' fitting.id %}"
                    class="d-flex flex-wrap align-items-center gap-2">
                    {% csrf_token %}
                    <input type="hidden" name="doctrine_id" value="{{ doctrine.id }}">
                    <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                    <label class="visually-hidden" for="fitting-priority-input-{{ fitting.id|unlocalize }}">{% translate "Fitting priority" %}</label>
                    <input
                        type="number"
                        id="fitting-priority-input-{{ fitting.id|unlocalize }}"
                        name="priority"
                        min="0"
                        max="10"
                        value="{{ fitting_priority }}"
                        class="form-control form-control-sm"
                        style="width: 84px;"
                    >
                    <div class="priority-preview-badge">
                        {% include 'mastery/partials/_priority_badge.html' with priority=fitting_priority %}
                    </div>
                    <button type="submit" class="btn btn-sm btn-outline-primary">{% translate "Save priority" %}</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="small text-muted mb-1">{% translate "Skill groups" %}</div>
                <div class="display-6 fw-semibold">{{ grouped_skills|length }}</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="small text-muted mb-1">{% translate "Suggestions" %}</div>
                <div class="display-6 fw-semibold {% if suggestion_count %}text-warning{% endif %}">{{ suggestion_count }}</div>
                {% if suggestion_count %}
                <button type="button" class="btn btn-sm btn-warning mt-2" data-bs-toggle="modal" data-bs-target="#applySuggestionsModal">
                    {% translate "Apply" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="small text-muted mb-1">{% translate "SkillSet size" %}</div>
                <div class="display-6 fw-semibold">{% if skillset_skill_count is not None %}{{ skillset_skill_count }}{% else %}&mdash;{% endif %}</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="small text-muted mb-1">{% translate "Effective mastery" %}</div>
                <div class="fs-4 fw-semibold">{{ effective_mastery_label }}</div>
                <div class="small text-muted mt-1">{% translate "Current doctrine mastery:" %} {{ doctrine_default_mastery_label }}</div>
                {% if fitting_mastery_override is not None %}
                <div class="small text-muted">{% translate "Fitting override active" %}</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="small text-muted mb-1">{% translate "Required plan from 0" %}</div>
                <div class="fw-semibold">{{ required_plan_total_sp|intcomma }} SP</div>
                <div class="small text-muted">{% translate "Estimated training:" %} {{ required_plan_total_time }} @ {{ plan_estimate_sp_per_hour|intcomma }} SP/h</div>
                <div class="small mt-2 d-flex flex-wrap align-items-center gap-2">
                    <span class="text-muted">{% translate "Alpha compatibility:" %}</span>
                    {% include 'mastery/partials/_clone_grade_badge.html' with requires_omega=required_plan_omega_skill_count %}
                    <span class="text-muted">
                        {{ required_plan_omega_skill_count }}/{{ required_plan_skill_count }} {% translate "skills require Omega" %}
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="small text-muted mb-1">{% translate "Recommended plan from 0" %}</div>
                <div class="fw-semibold">{{ recommended_plan_total_sp|intcomma }} SP</div>
                <div class="small text-muted">{% translate "Estimated training:" %} {{ recommended_plan_total_time }} @ {{ plan_estimate_sp_per_hour|intcomma }} SP/h</div>
                <div class="small mt-2 d-flex flex-wrap align-items-center gap-2">
                    <span class="text-muted">{% translate "Alpha compatibility:" %}</span>
                    {% include 'mastery/partials/_clone_grade_badge.html' with requires_omega=recommended_plan_omega_skill_count %}
                    <span class="text-muted">
                        {{ recommended_plan_omega_skill_count }}/{{ recommended_plan_skill_count }} {% translate "skills require Omega" %}
                    </span>
                </div>
                <div class="mt-2 d-flex flex-wrap align-items-center gap-2">
                    <textarea
                        id="recommended-plan-copy-source-{{ fitting.id|unlocalize }}"
                        class="d-none"
                        tabindex="-1"
                        aria-hidden="true"
                        readonly
                    >{{ recommended_plan_copy_text }}</textarea>
                    <button
                        type="button"
                        class="btn btn-sm btn-outline-primary mastery-copy-plan-btn"
                        data-copy-target="recommended-plan-copy-source-{{ fitting.id|unlocalize }}"
                        data-copy-default-label="{% translate "Copy recommended plan" %}{% if recommended_plan_copy_line_count %} ({{ recommended_plan_copy_line_count }} {% translate "lines" %}){% endif %}"
                        data-copy-success-label="{% translate "Copied!" %}"
                        {% if not recommended_plan_copy_text %}disabled{% endif %}
                    >
                        {% translate "Copy recommended plan" %}{% if recommended_plan_copy_line_count %} ({{ recommended_plan_copy_line_count }} {% translate "lines" %}){% endif %}
                    </button>
                    {% if can_make_recommended_plan_alpha_compatible %}
                    <form method="post" action="{% url 'mastery:make_recommended_plan_alpha_compatible' fitting.id %}" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button type="submit" class="btn btn-sm btn-outline-secondary">
                            {% translate "Make Skill Plan Alpha Compatible" %}
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mastery-editor-tab-layout d-flex flex-column flex-lg-row gap-3 align-items-start">
    <div class="mastery-editor-tab-nav">
        <div class="mastery-tabs-scroll">
            <div class="nav nav-pills mastery-group-nav" role="tablist" aria-orientation="vertical">
                {% for group, payload in grouped_skills.items %}
                <button
                    class="nav-link mastery-group-pill {% if forloop.first %}active{% endif %}"
                    id="mastery-group-tab-{{ forloop.counter }}"
                    data-group-key="{{ payload.group_id|default:'other'|unlocalize }}"
                    data-bs-toggle="tab"
                    data-bs-target="#mastery-group-pane-{{ forloop.counter }}"
                    type="button"
                    role="tab"
                    aria-controls="mastery-group-pane-{{ forloop.counter }}"
                    aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                >
                    <span class="mastery-group-pill-label">{{ group }}</span>
                    <span class="badge bg-secondary">{{ payload.active_skill_count|default:0 }}</span>
                </button>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="tab-content mastery-editor-tab-content flex-grow-1 w-100">
    {% for group, payload in grouped_skills.items %}
    {% with skills=payload.skills %}
    <div
        class="tab-pane fade {% if forloop.first %}show active{% endif %}"
        id="mastery-group-pane-{{ forloop.counter }}"
        role="tabpanel"
        aria-labelledby="mastery-group-tab-{{ forloop.counter }}"
        data-group-key="{{ payload.group_id|default:'other'|unlocalize }}"
    >
        <div class="card border-0 shadow-sm skill-group-card mb-3">
            <div class="card-body pt-2">
                <div class="small text-muted mb-2">
                    Req <strong>{{ payload.required_total_sp|default_if_none:0|default:0|intcomma }} SP</strong>
                    · Rec <strong>{{ payload.recommended_total_sp|default_if_none:0|default:0|intcomma }} SP</strong>
                    <span class="ms-2 badge bg-secondary">{{ skills|length }} skill{{ skills|length|pluralize }}</span>
                </div>
                <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                    {% if skills|group_has_active_skills %}
                    <form method="post" action="{% url 'mastery:update_skill_group_controls' fitting.id %}" class="d-flex gap-2">
                        {% csrf_token %}
                        {% for skill in skills %}
                        <input type="hidden" name="skill_type_ids" value="{{ skill.skill_type_id|unlocalize }}">
                        {% endfor %}
                        <input type="hidden" name="_group_key" value="{{ payload.group_id|default:'other'|unlocalize }}">
                        <input type="hidden" name="action" value="blacklist_group">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button class="btn btn-sm btn-outline-danger" type="submit">{% translate "Blacklist" %}</button>
                    </form>
                    {% endif %}

                    {% if skills|group_has_blacklisted_skills %}
                    <form method="post" action="{% url 'mastery:update_skill_group_controls' fitting.id %}" class="d-flex gap-2">
                        {% csrf_token %}
                        {% for skill in skills %}
                        <input type="hidden" name="skill_type_ids" value="{{ skill.skill_type_id|unlocalize }}">
                        {% endfor %}
                        <input type="hidden" name="_group_key" value="{{ payload.group_id|default:'other'|unlocalize }}">
                        <input type="hidden" name="action" value="unblacklist_group">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button class="btn btn-sm btn-outline-success" type="submit">{% translate "Unblacklist" %}</button>
                    </form>
                    {% endif %}

                    <form method="post" action="{% url 'mastery:update_skill_group_controls' fitting.id %}" class="d-flex gap-2 align-items-center">
                        {% csrf_token %}
                        {% for skill in skills %}
                        <input type="hidden" name="skill_type_ids" value="{{ skill.skill_type_id|unlocalize }}">
                        {% endfor %}
                        <input type="hidden" name="action" value="set_group_recommended">
                        <input type="hidden" name="_group_key" value="{{ payload.group_id|default:'other'|unlocalize }}">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <select class="form-select form-select-sm" name="recommended_level" style="width: 120px;" {% if not skills|group_has_active_skills %}disabled{% endif %}>
                            <option value="">{% translate "Auto" %}</option>
                            {% for level in recommended_choices %}
                            <option value="{{ level }}">{% translate "Level" %} {{ level }}</option>
                            {% endfor %}
                        </select>
                        <button class="btn btn-sm btn-outline-primary" type="submit" {% if not skills|group_has_active_skills %}disabled title="{% translate 'No active skills in this group' %}"{% endif %}>{% translate "Apply level" %}</button>
                    </form>

                    {% if payload.suggestion_count %}
                    <form method="post" action="{% url 'mastery:apply_group_suggestions' fitting.id %}" class="d-flex gap-2">
                        {% csrf_token %}
                        {% for skill in skills %}
                        <input type="hidden" name="skill_type_ids" value="{{ skill.skill_type_id|unlocalize }}">
                        {% endfor %}
                        <input type="hidden" name="_group_key" value="{{ payload.group_id|default:'other'|unlocalize }}">
                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                        <button class="btn btn-sm btn-warning" type="submit">{% blocktranslate count count=payload.suggestion_count %}Apply {{ count }} suggestion{% plural %}Apply {{ count }} suggestions{% endblocktranslate %}</button>
                    </form>
                    {% endif %}
                </div>

                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0 group-skills-table">
                        <thead class="mastery-table-head">
                        <tr>
                            <th>{% translate "Skill" %}</th>
                            <th>{% translate "Req" %}</th>
                            <th>{% translate "Rec" %}</th>
                            <th class="edit-rec-col">{% translate "Edit rec" %}</th>
                            <th class="text-end">{% translate "Actions" %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for skill in skills %}
                        <tr class="{% if skill.is_blacklisted %}table-danger is-blacklisted-row{% endif %}">
                            <td>
                                <div class="d-flex align-items-center flex-wrap gap-1 mb-1 skill-title-row">
                                    <span class="fw-semibold skill-name-text">{{ skill.skill_name }}</span>
                                    {% if skill.skill_description %}
                                    <button type="button" class="btn btn-link btn-sm p-0" 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 skill-help-badge">?</span>
                                    </button>
                                    {% endif %}
                                </div>
                                <div class="small d-flex flex-wrap gap-1 skill-meta-row">
                                    {% if skill.is_manual %}<span class="badge text-bg-info skill-meta-badge">{% translate "Manual" %}</span>{% endif %}
                                    {% if skill.is_blacklisted %}<span class="badge bg-danger skill-meta-badge">{% translate "Blacklisted" %}</span>{% endif %}
                                    {% if skill.is_suggested %}
                                    <span class="badge bg-warning text-dark skill-meta-badge"
                                        data-bs-tooltip="aa-mastery"
                                        data-bs-placement="top"
                                        data-bs-title="{{ skill.suggestion_reason }}">
                                        {% translate "Suggest:" %} {% if skill.suggestion_action == 'remove' %}{% translate "Remove from plan" %}{% else %}{% translate "Add back to plan" %}{% endif %}
                                    </span>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <span>{{ skill.required_level|skill_render }}</span>
                                    {% if skill.required_level > 0 %}
                                    {% include 'mastery/partials/_clone_grade_badge.html' with requires_omega=skill.required_requires_omega size='sm' %}
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <span>{{ skill.recommended_level|skill_render }}</span>
                                    {% if skill.recommended_level > 0 %}
                                    {% include 'mastery/partials/_clone_grade_badge.html' with requires_omega=skill.recommended_requires_omega size='sm' %}
                                    {% endif %}
                                </div>
                            </td>
                            <td class="edit-rec-col">
                                <form method="post" action="{% url 'mastery:update_skill_recommended' fitting.id %}"
                                    class="rec-edit-form">
                                    {% csrf_token %}
                                    <input type="hidden" name="skill_type_id" value="{{ skill.skill_type_id|unlocalize }}">
                                    <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                                    <select class="form-select form-select-sm rec-level-select" name="recommended_level">
                                        <option value="" {% if skill.recommended_level_override is None %}selected{% endif %}>{% translate "Auto" %}</option>
                                        {% for level in recommended_choices %}
                                        <option value="{{ level }}" {% if skill.recommended_level_override == level %}selected{% endif %} {% if level < skill.required_level %}disabled{% endif %}>{% translate "Level" %} {{ level }}</option>
                                        {% endfor %}
                                    </select>
                                    <button class="btn btn-sm btn-outline-primary rec-set-btn" type="submit">{% translate "Set" %}</button>
                                </form>
                            </td>
                            <td class="text-end">
                                <div class="d-inline-flex flex-column align-items-end gap-1">
                                    {% if skill.is_suggested %}
                                    <form method="post" action="{% url 'mastery:apply_skill_suggestion' fitting.id %}" class="m-0">
                                        {% csrf_token %}
                                        <input type="hidden" name="skill_type_id" value="{{ skill.skill_type_id|unlocalize }}">
                                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                                        <button class="btn btn-sm btn-warning" type="submit" title="{% translate 'Apply suggestion' %}">
                                            {% translate "Apply" %}
                                        </button>
                                    </form>
                                    {% endif %}
                                    <form method="post" action="{% url 'mastery:toggle_skill_blacklist_view' fitting.id %}" class="m-0">
                                        {% csrf_token %}
                                        <input type="hidden" name="skill_type_id" value="{{ skill.skill_type_id|unlocalize }}">
                                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                                        <input type="hidden" name="value" value="{% if skill.is_blacklisted %}false{% else %}true{% endif %}">
                                        <button class="btn btn-sm btn-icon {% if skill.is_blacklisted %}btn-outline-success{% else %}btn-outline-danger{% endif %}"
                                            type="submit"
                                            title="{% if skill.is_blacklisted %}{% translate 'Unblacklist' %}{% else %}{% translate 'Blacklist' %}{% endif %}"
                                            aria-label="{% if skill.is_blacklisted %}{% translate 'Unblacklist' %}{% else %}{% translate 'Blacklist' %}{% endif %}">
                                            {% if skill.is_blacklisted %}
                                            <span class="fas fa-check-circle" aria-hidden="true"></span>
                                            {% else %}
                                            <span class="fas fa-ban" aria-hidden="true"></span>
                                            {% endif %}
                                        </button>
                                    </form>
                                {% if skill.is_manual %}
                                    <form method="post" action="{% url 'mastery:remove_manual_skill' fitting.id %}" class="m-0">
                                        {% csrf_token %}
                                        <input type="hidden" name="skill_type_id" value="{{ skill.skill_type_id|unlocalize }}">
                                        <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                                        <button class="btn btn-sm btn-outline-secondary" type="submit">{% translate "Remove manual" %}</button>
                                    </form>
                                {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% endwith %}
    {% endfor %}
    </div>
</div>

{% if suggestion_count %}
<div class="modal fade" id="applySuggestionsModal" tabindex="-1" aria-labelledby="applySuggestionsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="applySuggestionsModalLabel">{% translate "Apply suggestions" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{% blocktranslate count count=suggestion_count %}This will automatically apply <strong>{{ count }} suggestion</strong>:{% plural %}This will automatically apply <strong>{{ count }} suggestions</strong>:{% endblocktranslate %}
                </p>
                <ul>
                    <li>{% translate "Skills suggested for" %} <strong>{% translate "removal" %}</strong> {% translate "will be" %} <span class="text-danger">{% translate "blacklisted" %}</span> {% translate "and excluded from the MemberAudit SkillSet." %}</li>
                    <li>{% translate "Skills suggested to" %} <strong>{% translate "add back" %}</strong> {% translate "will be" %} <span class="text-success">{% translate "unblacklisted" %}</span>.</li>
                </ul>
                <p class="mb-0 text-muted small">{% translate "You can review and undo individual changes afterwards." %}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                <form method="post" action="{% url 'mastery:apply_suggestions' fitting.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{% url 'mastery:fitting_skills' fitting.id %}">
                    <button type="submit" class="btn btn-warning">{% blocktranslate count count=suggestion_count %}Apply {{ count }} suggestion{% plural %}Apply {{ count }} suggestions{% endblocktranslate %}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}