{% extends 'mastery/base.html' %}
{% load i18n %}
{% load humanize %}
{% load evelinks %}

{% block details %}
<div class="container mt-4">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h2 class="mb-1 d-flex align-items-center gap-2">
                <img src="{{ fitting.ship_type_type_id|type_render_url:32 }}" class="rounded" width="32" height="32" alt="{{ fitting.ship_type.name }}">
                <span>{{ fitting.name }}</span>
            </h2>
            <div class="text-muted">{{ fitting.ship_type.name }}{% if doctrine %} · Doctrine: {{ doctrine.name }}{% endif %}</div>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a class="btn btn-sm btn-outline-secondary" href="{% url 'mastery:pilot_index' %}">
                <span class="fas fa-arrow-left" aria-hidden="true"></span>
                Back to Skill Mastery
            </a>
            <a class="btn btn-sm btn-outline-primary" href="{% url 'fittings:view_fit' fitting.id %}">
                <span class="fas fa-ship" aria-hidden="true"></span>
                View fitting
            </a>
            {% if doctrine %}
            <a class="btn btn-sm btn-outline-primary" href="{% url 'fittings:view_doctrine' doctrine.id %}">
                <span class="fas fa-sitemap" aria-hidden="true"></span>
                View doctrine
            </a>
            {% endif %}
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header">Character readiness</div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0" style="table-layout: fixed; width: 100%;">
                    <colgroup>
                        <col style="width: 220px;">
                        <col style="width: 140px;">
                        <col style="width: 140px;">
                        <col>
                        <col style="width: 130px;">
                    </colgroup>
                    <thead class="mastery-table-head">
                    <tr>
                        <th>Character</th>
                        <th>Required</th>
                        <th>Recommended</th>
                        <th>Gap</th>
                        <th>Details</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in character_rows %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ row.character.eve_character|character_portrait_url:32 }}" class="rounded-circle" width="32" height="32" alt="{{ row.character.eve_character.character_name }}">
                                <span>{{ row.character.eve_character.character_name }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="small fw-semibold mb-1">{{ row.progress.required_pct }}%</div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ row.progress.required_pct }}%"></div>
                            </div>
                        </td>
                        <td>
                            <div class="small fw-semibold mb-1">{{ row.progress.recommended_pct }}%</div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ row.progress.recommended_pct }}%"></div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-{{ row.progress.status_class }}{% if row.progress.status_class == 'warning' %} text-dark{% endif %} mb-1">{{ row.progress.status_label }}</span><br>
                            {{ row.progress.missing_recommended_count }} skill{{ row.progress.missing_recommended_count|pluralize }}
                            {% if row.progress.total_missing_sp %}
                            · {{ row.progress.total_missing_sp|intcomma }} SP
                            {% endif %}
                        </td>
                        <td>
                            <a class="btn btn-sm {% if selected_character and selected_character.id == row.character.id %}btn-success{% else %}btn-outline-primary{% endif %}" href="{% url 'mastery:pilot_fitting_detail' fitting.id %}?character_id={{ row.character.id }}&export_mode={{ export_mode }}&export_language={{ export_language }}{% if summary_group_id %}&group_id={{ summary_group_id }}{% endif %}">
                                {% if selected_character and selected_character.id == row.character.id %}
                                <span class="fas fa-check-circle" aria-hidden="true"></span>
                                Selected
                                {% else %}
                                <span class="fas fa-crosshairs" aria-hidden="true"></span>
                                Select
                                {% endif %}
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-muted">No characters available for your account.</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {% if selected_character and selected_progress %}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
                <div class="small text-muted">Export mode (affects the whole view)</div>
                <div class="fw-semibold">Active mode: {{ export_mode_label }}</div>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2">
                <div class="btn-group" role="group" aria-label="Export mode">
                    {% for value, label in export_mode_choices %}
                    <a class="btn {% if export_mode == value %}btn-primary{% else %}btn-outline-primary{% endif %}" href="{% url 'mastery:pilot_fitting_detail' fitting.id %}?character_id={{ selected_character.id }}&export_mode={{ value }}&export_language={{ export_language }}{% if summary_group_id %}&group_id={{ summary_group_id }}{% endif %}">{{ label }}</a>
                    {% endfor %}
                </div>
                <form method="get" class="d-flex align-items-center gap-2">
                    <input type="hidden" name="character_id" value="{{ selected_character.id }}">
                    <input type="hidden" name="export_mode" value="{{ export_mode }}">
                    {% if summary_group_id %}<input type="hidden" name="group_id" value="{{ summary_group_id }}">{% endif %}
                    <label class="small text-muted" for="exportLanguageSelect" title="{{ export_language_scope_label|default:'Affects export' }}">Export language</label>
                    <select id="exportLanguageSelect" class="form-select form-select-sm" name="export_language" onchange="this.form.submit()">
                        {% for value, label in export_language_choices %}
                        <option value="{{ value }}" {% if export_language == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="small text-muted mb-1">Selected pilot</div>
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <img src="{{ selected_character.eve_character|character_portrait_url:32 }}" class="rounded-circle" width="32" height="32" alt="{{ selected_character.eve_character.character_name }}">
                        <div class="fw-semibold">{{ selected_character.eve_character.character_name }}</div>
                    </div>
                    <span class="badge bg-{{ selected_progress.status_class }}{% if selected_progress.status_class == 'warning' %} text-dark{% endif %} mt-1">{{ selected_progress.status_label }}</span>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="small text-muted mb-1">Coverage</div>
                    <div class="display-6 fw-semibold">{% if selected_mode_stats %}{{ selected_mode_stats.coverage_pct }}%{% else %}0%{% endif %}</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="small text-muted mb-1">Missing SP</div>
                    <div class="display-6 fw-semibold">{% if selected_mode_stats %}{{ selected_mode_stats.total_missing_sp|intcomma }}{% else %}0{% endif %}</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="small text-muted mb-1">Estimated training</div>
                    <div class="fw-semibold">{% if selected_mode_stats and selected_mode_stats.total_missing_time is not None %}{{ selected_mode_stats.total_missing_time }}{% else %}<span class="text-muted">Unknown</span>{% endif %}</div>
                </div>
            </div>
        </div>
    </div>

    {% if skill_plan_summary %}
    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                        <div>
                            <div class="small text-muted text-uppercase fw-semibold mb-1">Plan advisory</div>
                            <div class="h5 mb-1">{{ export_mode_label }} training plan overview</div>
                            <div class="small text-muted">Quick read on remap efficiency, injector fallback and the overall scope of the current plan.</div>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge rounded-pill text-bg-secondary px-3 py-2">{{ skill_plan_summary.line_count }} step{{ skill_plan_summary.line_count|pluralize }}</span>
                            <span class="badge rounded-pill mastery-badge-neutral px-3 py-2">{{ skill_plan_summary.unique_skill_count }} skill{{ skill_plan_summary.unique_skill_count|pluralize }}</span>
                            <span class="badge rounded-pill text-bg-primary px-3 py-2">{{ skill_plan_summary.total_missing_sp|intcomma }} SP</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <div class="small text-muted text-uppercase fw-semibold">Neural remap advisory</div>
                        <div class="fw-semibold">Best attribute focus for this plan</div>
                    </div>
                    {% if skill_plan_summary.optimal_remap %}
                    <span class="badge bg-primary">{{ skill_plan_summary.optimal_remap.primary_label }} / {{ skill_plan_summary.optimal_remap.secondary_label }}</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if skill_plan_summary.optimal_remap %}
                    <div class="row g-3 mb-3">
                        <div class="col-12 col-lg-5">
                            <div class="border rounded-3 p-3 h-100 mastery-surface-subtle">
                                <div class="small text-muted text-uppercase fw-semibold mb-1">Recommended focus</div>
                                <div class="h5 mb-2">{{ skill_plan_summary.optimal_remap.primary_label }} / {{ skill_plan_summary.optimal_remap.secondary_label }}</div>
                                <div class="small text-muted mb-0">This is the remap pairing that minimizes training time across the current exported plan.</div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-7">
                            <div class="border rounded-3 p-3 h-100">
                                <div class="small text-muted text-uppercase fw-semibold mb-2">Training time comparison</div>
                                <div class="d-flex flex-column gap-2 small">
                                    {% if skill_plan_summary.optimal_remap.has_implant_bonus %}
                                    <div class="small text-muted">
                                        Implant bonuses are included in both current and recommended simulations.
                                    </div>
                                    {% endif %}
                                    <div class="d-flex justify-content-between gap-3">
                                        <span class="text-muted">Best-case with suggested remap</span>
                                        <span class="fw-semibold text-nowrap">{{ skill_plan_summary.optimal_remap.estimated_time }}</span>
                                    </div>
                                    {% if skill_plan_summary.optimal_remap.current_time is not None %}
                                    <div class="d-flex justify-content-between gap-3">
                                        <span class="text-muted">With current attributes</span>
                                        <span class="fw-semibold text-nowrap">{{ skill_plan_summary.optimal_remap.current_time }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between gap-3 border-top pt-2">
                                        <span class="text-muted">Potential time saved</span>
                                        <span class="fw-semibold text-success text-nowrap">{{ skill_plan_summary.optimal_remap.time_saved }}</span>
                                    </div>
                                    {% else %}
                                    <div class="text-muted">Current attribute data is unavailable, so only the optimal remap estimate can be shown.</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="small text-muted text-uppercase fw-semibold mb-2">Suggested remap values</div>
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        {% for attribute in skill_plan_summary.optimal_remap.attributes %}
                        <span class="badge rounded-pill {% if attribute.is_primary %}text-bg-primary{% elif attribute.is_secondary %}text-bg-info{% else %}mastery-badge-neutral{% endif %} px-3 py-2">
                            {{ attribute.label }}
                            <span class="opacity-75">Base</span> {{ attribute.base_value }}
                            {% if skill_plan_summary.optimal_remap.has_implant_bonus %}
                            · <span class="opacity-75">With implants</span> {{ attribute.effective_value }}
                            {% endif %}
                        </span>
                        {% endfor %}
                    </div>

                    {% if skill_plan_summary.optimal_remap.current_attributes_rows %}
                    <div class="small text-muted text-uppercase fw-semibold mb-2">Current character attributes</div>
                    <div class="d-flex flex-wrap gap-2">
                        {% for attribute in skill_plan_summary.optimal_remap.current_attributes_rows %}
                        <span class="badge rounded-pill mastery-badge-neutral px-3 py-2">
                            {{ attribute.label }}
                            <span class="opacity-75">Base</span> {{ attribute.base_value }}
                            {% if skill_plan_summary.optimal_remap.has_implant_bonus %}
                            · <span class="opacity-75">With implants</span> {{ attribute.effective_value }}
                            {% endif %}
                        </span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    {% if skill_plan_summary.optimal_remap.implant_bonus_rows %}
                    <div class="small text-muted text-uppercase fw-semibold mt-3 mb-2">Detected implant bonuses</div>
                    <div class="d-flex flex-wrap gap-2">
                        {% for attribute in skill_plan_summary.optimal_remap.implant_bonus_rows %}
                        <span class="badge rounded-pill mastery-sp-chip">{{ attribute.label }} +{{ attribute.value }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% else %}
                    <div class="text-muted">Unable to determine an optimal remap for this plan.</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <div class="small text-muted text-uppercase fw-semibold">Injector fallback</div>
                        <div class="fw-semibold">Large Skill Injectors</div>
                    </div>
                    {% if skill_plan_summary.injector_estimate.known %}
                    <span class="badge bg-warning text-dark">Estimated</span>
                    {% else %}
                    <span class="badge bg-secondary">Unavailable</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <img src="{{ skill_plan_summary.injector_estimate.large_skill_injector_type_id|type_icon_url:64 }}" class="rounded" width="64" height="64" alt="Large Skill Injector">
                        <div class="flex-grow-1">
                            <div class="small text-muted text-uppercase fw-semibold">Estimated injectors for this {{ export_mode_label|lower }} plan</div>
                            <div class="display-5 fw-semibold mb-0 lh-1">
                                {% if skill_plan_summary.injector_estimate.known %}
                                {{ skill_plan_summary.injector_estimate.count }}
                                {% else %}
                                ?
                                {% endif %}
                            </div>
                            <div class="small text-muted mt-1">
                                {% if skill_plan_summary.injector_estimate.known %}
                                Approximate fallback if you finish the plan with injectors only.
                                {% else %}
                                Character total SP is missing, so the injector estimate cannot be derived.
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="list-group list-group-flush small mb-3">
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Plan SP to cover</span>
                            <span class="fw-semibold text-nowrap">{{ skill_plan_summary.total_missing_sp|intcomma }} SP</span>
                        </div>
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Unallocated SP available</span>
                            <span class="fw-semibold text-nowrap">{% if skill_plan_summary.current_unallocated_sp is not None %}{{ skill_plan_summary.current_unallocated_sp|intcomma }} SP{% else %}&mdash;{% endif %}</span>
                        </div>
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Remaining after unallocated SP</span>
                            <span class="fw-semibold text-nowrap">{{ skill_plan_summary.remaining_sp_after_unallocated|intcomma }} SP</span>
                        </div>
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Current character total SP</span>
                            <span class="fw-semibold text-nowrap">{% if skill_plan_summary.current_total_sp is not None %}{{ skill_plan_summary.current_total_sp|intcomma }} SP{% else %}&mdash;{% endif %}</span>
                        </div>
                        {% if skill_plan_summary.injector_estimate.known %}
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Current yield per injector</span>
                            <span class="fw-semibold text-nowrap">{{ skill_plan_summary.injector_estimate.current_gain_per_injector|intcomma }} SP</span>
                        </div>
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Injector SP applied</span>
                            <span class="fw-semibold text-nowrap">{{ skill_plan_summary.injector_estimate.gained_sp|intcomma }} SP</span>
                        </div>
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Projected total SP after injectors</span>
                            <span class="fw-semibold text-nowrap">{{ skill_plan_summary.injector_estimate.final_total_sp|intcomma }} SP</span>
                        </div>
                        {% if skill_plan_summary.injector_estimate.overage_sp %}
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Injector overage</span>
                            <span class="fw-semibold text-nowrap">{{ skill_plan_summary.injector_estimate.overage_sp|intcomma }} SP</span>
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>

                    <div class="border rounded-3 p-3 mastery-surface-subtle small text-muted">
                        <div class="fw-semibold text-body mb-2">LSI yield bands</div>
                        <div>&lt; 5M SP → 500k SP</div>
                        <div>5M–50M SP → 400k SP</div>
                        <div>50M–80M SP → 300k SP</div>
                        <div>80M+ SP → 150k SP</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="row g-3">
        <div class="col-12 col-xl-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Missing skills · {{ selected_character.eve_character.character_name }}</span>
                    <div class="d-flex gap-2">
                        <span class="badge bg-danger" title="Missing required">Req {{ selected_progress.missing_required_count }}</span>
                        <span class="badge bg-warning text-dark" title="Missing recommended">Rec {{ selected_progress.missing_recommended_count }}</span>
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#missingSkillsModal">
                            <span class="fas fa-list-ul" aria-hidden="true"></span>
                            View full gap
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div class="fw-semibold small text-muted">Required</div>
                        <span class="badge bg-danger">{{ selected_progress.missing_required_count }}</span>
                    </div>
                    {% if selected_progress.missing_required %}
                    <div class="d-flex flex-column gap-2 mastery-missing-list">
                        {% for skill in selected_progress.missing_required %}
                        <div class="mastery-missing-skill-row">
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ skill.skill_type_id|type_icon_url:32 }}" class="rounded" width="28" height="28" alt="{{ skill.skill_name }}">
                                <div class="mastery-skill-name">{{ skill.skill_name }}</div>
                            </div>
                            <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                                <span class="badge mastery-level-badge">{{ skill.current_level }}</span>
                                <span class="text-muted small">→</span>
                                <span class="badge mastery-level-badge-target">{{ skill.target_level }}</span>
                                {% if skill.missing_sp %}
                                <span class="badge mastery-sp-chip">{{ skill.missing_sp|intcomma }} SP</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-success">All required skills met.</div>
                    {% endif %}

                    <hr>

                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div class="fw-semibold small text-muted">Recommended</div>
                        <span class="badge bg-warning text-dark">{{ selected_progress.missing_recommended_count }}</span>
                    </div>
                    {% if selected_progress.missing_recommended %}
                    <div class="d-flex flex-column gap-2 mastery-missing-list">
                        {% for skill in selected_progress.missing_recommended %}
                        <div class="mastery-missing-skill-row">
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ skill.skill_type_id|type_icon_url:32 }}" class="rounded" width="28" height="28" alt="{{ skill.skill_name }}">
                                <div class="mastery-skill-name">{{ skill.skill_name }}</div>
                            </div>
                            <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                                <span class="badge mastery-level-badge">{{ skill.current_level }}</span>
                                <span class="text-muted small">→</span>
                                <span class="badge mastery-level-badge-target">{{ skill.target_level }}</span>
                                {% if skill.missing_sp %}
                                <span class="badge mastery-sp-chip">{{ skill.missing_sp|intcomma }} SP</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-success">All recommended skills met.</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>{{ export_mode_label }} gap and plan export</span>
                </div>
                <div class="card-body">
                    <div class="small mb-2">
                        <strong>Missing SP:</strong> {% if selected_mode_stats %}{{ selected_mode_stats.total_missing_sp|intcomma }}{% else %}0{% endif %}
                        {% if selected_mode_stats and selected_mode_stats.total_missing_time is not None %}
                        · <strong>Estimated training:</strong> {{ selected_mode_stats.total_missing_time }}
                        {% else %}
                        · <strong>Estimated training:</strong> <span class="text-muted">Unknown (missing attribute data)</span>
                        {% endif %}
                    </div>

                    <label class="form-label small text-muted" for="skillPlanText">EVE clipboard text</label>
                    <textarea id="skillPlanText" class="form-control form-control-sm" rows="10" readonly>{% for line in selected_export_lines %}{{ line }}
{% empty %}No missing skills for this fitting.{% endfor %}</textarea>
                    <div class="d-flex flex-wrap gap-2 mt-2">
                        <button type="button" class="btn btn-sm btn-primary" id="copySkillPlanBtn">
                            <span class="fas fa-copy" aria-hidden="true"></span>
                            <span class="copy-btn-label">Copy to clipboard</span>
                        </button>
                        <a class="btn btn-sm btn-outline-primary" href="{% url 'mastery:pilot_fitting_skillplan_export' fitting.id %}?character_id={{ selected_character.id }}&mode={{ export_mode }}&language={{ export_language }}{% if summary_group_id %}&group_id={{ summary_group_id }}{% endif %}">
                            <span class="fas fa-download" aria-hidden="true"></span>
                            Download .txt
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="missingSkillsModal" tabindex="-1" aria-labelledby="missingSkillsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="missingSkillsModalLabel">Missing skills · {{ selected_character.eve_character.character_name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12 col-lg-6">
                            <div class="border rounded p-3 h-100">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="fw-semibold">Required</div>
                                    <span class="badge bg-danger">{{ selected_progress.missing_required_count }}</span>
                                </div>
                                {% if selected_progress.missing_required %}
                                <div class="d-flex flex-column gap-2 mastery-missing-list mastery-missing-list-compact">
                                    {% for skill in selected_progress.missing_required %}
                                    <div class="mastery-missing-skill-row">
                                        <div class="d-flex align-items-center gap-2">
                                            <img src="{{ skill.skill_type_id|type_icon_url:32 }}" class="rounded" width="24" height="24" alt="{{ skill.skill_name }}">
                                            <div class="mastery-skill-name">{{ skill.skill_name }}</div>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                                            <span class="badge mastery-level-badge">{{ skill.current_level }}</span>
                                            <span class="text-muted small">→</span>
                                            <span class="badge mastery-level-badge-target">{{ skill.target_level }}</span>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <div class="text-success small">No missing required skills.</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="border rounded p-3 h-100">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="fw-semibold">Recommended</div>
                                    <span class="badge bg-warning text-dark">{{ selected_progress.missing_recommended_count }}</span>
                                </div>
                                {% if selected_progress.missing_recommended %}
                                <div class="d-flex flex-column gap-2 mastery-missing-list mastery-missing-list-compact">
                                    {% for skill in selected_progress.missing_recommended %}
                                    <div class="mastery-missing-skill-row">
                                        <div class="d-flex align-items-center gap-2">
                                            <img src="{{ skill.skill_type_id|type_icon_url:32 }}" class="rounded" width="24" height="24" alt="{{ skill.skill_name }}">
                                            <div class="mastery-skill-name">{{ skill.skill_name }}</div>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                                            <span class="badge mastery-level-badge">{{ skill.current_level }}</span>
                                            <span class="text-muted small">→</span>
                                            <span class="badge mastery-level-badge-target">{{ skill.target_level }}</span>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <div class="text-success small">No missing recommended skills.</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<style>
    .mastery-table-head th {
        background-color: var(--bs-tertiary-bg, #f1f3f5);
        color: var(--bs-emphasis-color, var(--bs-body-color));
        border-bottom-color: var(--bs-border-color, #dee2e6);
    }

    .mastery-surface-subtle {
        background-color: var(--bs-secondary-bg, #f8f9fa);
        color: var(--bs-body-color, #212529);
        border-color: var(--bs-border-color, #dee2e6) !important;
    }

    .mastery-surface-subtle .text-muted {
        color: var(--bs-secondary-color, #6c757d) !important;
    }

    .mastery-surface-subtle .h5,
    .mastery-surface-subtle .fw-semibold {
        color: var(--bs-emphasis-color, var(--bs-body-color, #212529));
    }

    .mastery-badge-neutral {
        background-color: var(--bs-secondary-bg, #e9ecef);
        color: var(--bs-emphasis-color, var(--bs-body-color));
        border: 1px solid var(--bs-border-color, #dee2e6);
    }

    .mastery-missing-list {
        max-height: 320px;
        overflow: auto;
    }

    .mastery-missing-list-compact {
        max-height: 260px;
    }

    .mastery-missing-skill-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.45rem 0.55rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.5rem;
        background-color: var(--bs-secondary-bg, #f8f9fa);
    }

    .mastery-skill-name {
        font-weight: 600;
        line-height: 1.2;
    }

    .mastery-level-badge,
    .mastery-level-badge-target {
        min-width: 1.85rem;
        text-align: center;
        font-weight: 700;
    }

    .mastery-level-badge {
        background-color: var(--bs-secondary-bg, #e9ecef);
        color: var(--bs-body-color, #212529);
        border: 1px solid var(--bs-border-color, #dee2e6);
    }

    .mastery-level-badge-target {
        background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
        color: var(--bs-primary, #0d6efd);
        border: 1px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
    }

    .mastery-sp-chip {
        background-color: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.22);
        color: var(--bs-emphasis-color, var(--bs-body-color, #212529));
        border: 1px solid rgba(var(--bs-warning-rgb, 255, 193, 7), 0.45);
        font-weight: 600;
    }

    html[data-bs-theme="dark"] .mastery-table-head th,
    body[data-bs-theme="dark"] .mastery-table-head th,
    html[data-theme*="dark"] .mastery-table-head th,
    body[data-theme*="dark"] .mastery-table-head th {
        background-color: rgba(255, 255, 255, 0.06);
        color: #f1f3f5;
        border-bottom-color: rgba(255, 255, 255, 0.18);
    }

    html[data-bs-theme="dark"] .mastery-surface-subtle,
    body[data-bs-theme="dark"] .mastery-surface-subtle,
    html[data-theme*="dark"] .mastery-surface-subtle,
    body[data-theme*="dark"] .mastery-surface-subtle {
        background-color: rgba(255, 255, 255, 0.06);
        color: #e9ecef;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    html[data-bs-theme="dark"] .mastery-surface-subtle .text-muted,
    body[data-bs-theme="dark"] .mastery-surface-subtle .text-muted,
    html[data-theme*="dark"] .mastery-surface-subtle .text-muted,
    body[data-theme*="dark"] .mastery-surface-subtle .text-muted {
        color: #adb5bd !important;
    }

    html[data-bs-theme="dark"] .mastery-surface-subtle .h5,
    body[data-bs-theme="dark"] .mastery-surface-subtle .h5,
    html[data-theme*="dark"] .mastery-surface-subtle .h5,
    body[data-theme*="dark"] .mastery-surface-subtle .h5,
    html[data-bs-theme="dark"] .mastery-surface-subtle .fw-semibold,
    body[data-bs-theme="dark"] .mastery-surface-subtle .fw-semibold,
    html[data-theme*="dark"] .mastery-surface-subtle .fw-semibold,
    body[data-theme*="dark"] .mastery-surface-subtle .fw-semibold {
        color: #f8f9fa;
    }

    html[data-bs-theme="dark"] .mastery-badge-neutral,
    body[data-bs-theme="dark"] .mastery-badge-neutral,
    html[data-theme*="dark"] .mastery-badge-neutral,
    body[data-theme*="dark"] .mastery-badge-neutral {
        background-color: rgba(255, 255, 255, 0.1);
        color: #e9ecef;
        border-color: rgba(255, 255, 255, 0.18);
    }

    html[data-bs-theme="dark"] .mastery-missing-skill-row,
    body[data-bs-theme="dark"] .mastery-missing-skill-row,
    html[data-theme*="dark"] .mastery-missing-skill-row,
    body[data-theme*="dark"] .mastery-missing-skill-row {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.16);
    }

    html[data-bs-theme="dark"] .mastery-level-badge,
    body[data-bs-theme="dark"] .mastery-level-badge,
    html[data-theme*="dark"] .mastery-level-badge,
    body[data-theme*="dark"] .mastery-level-badge {
        background-color: rgba(255, 255, 255, 0.12);
        color: #f1f3f5;
        border-color: rgba(255, 255, 255, 0.18);
    }

    html[data-bs-theme="dark"] .mastery-level-badge-target,
    body[data-bs-theme="dark"] .mastery-level-badge-target,
    html[data-theme*="dark"] .mastery-level-badge-target,
    body[data-theme*="dark"] .mastery-level-badge-target {
        background-color: rgba(13, 110, 253, 0.28);
        color: #dbeafe;
        border-color: rgba(147, 197, 253, 0.45);
    }

    html[data-bs-theme="dark"] .mastery-sp-chip,
    body[data-bs-theme="dark"] .mastery-sp-chip,
    html[data-theme*="dark"] .mastery-sp-chip,
    body[data-theme*="dark"] .mastery-sp-chip {
        background-color: rgba(255, 193, 7, 0.22);
        color: #fff3cd;
        border-color: rgba(255, 193, 7, 0.35);
    }

    #copySkillPlanBtn .fas,
    .btn .fas {
        margin-right: 0.35rem;
    }

    #copySkillPlanBtn {
        box-shadow: var(--bs-box-shadow-sm);
    }
</style>

<script>
    $(document).ready(() => {
        $('#copySkillPlanBtn').on('click', function () {
            const element = document.getElementById('skillPlanText');
            if (!element) {
                return;
            }
            element.select();
            element.setSelectionRange(0, 99999);
            try {
                navigator.clipboard.writeText(element.value);
            } catch (_) {
                document.execCommand('copy');
            }
            const btn = $(this);
            const label = btn.find('.copy-btn-label');
            const original = label.text();
            label.text('Copied!');
            btn.prop('disabled', true);
            setTimeout(() => {
                label.text(original);
                btn.prop('disabled', false);
            }, 1500);
        });
    });
</script>
{% endblock %}