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

{% block details %}
<div class="container mt-4">
	<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
		<div>
			<h2 class="mb-1">{% translate "Skill Mastery" %}</h2>
			<p class="text-muted mb-0">{% blocktranslate with count=character_count %}Doctrine readiness overview for your characters ({{ count }} tracked).{% endblocktranslate %}</p>
		</div>
	</div>

	<form method="get" class="card shadow-sm border-0 mb-4">
		<div class="card-body">
			<div class="row g-3 align-items-end">
				<div class="col-12 col-lg-5">
					<label class="form-label small text-muted" for="pilotSearchInput">{% translate "Search doctrine / fitting / ship" %}</label>
					<input id="pilotSearchInput" type="text" name="q" value="{{ search_query }}" class="form-control" placeholder="Cerb, Armor, Fleet Issue...">
				</div>
				<div class="col-12 col-md-6 col-lg-3">
					<label class="form-label small text-muted" for="pilotCharacterFilter">{% translate "Focus character" %}</label>
					<select id="pilotCharacterFilter" name="character_id" class="form-select">
						<option value="">{% translate "Best character available" %}</option>
						{% for character in member_characters %}
						<option value="{{ character.id }}" {% if selected_character_id == character.id %}selected{% endif %}>{{ character.eve_character.character_name }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="col-12 col-md-6 col-lg-2">
					<label class="form-label small text-muted" for="pilotStatusFilter">{% translate "Status" %}</label>
					<select id="pilotStatusFilter" name="status" class="form-select">
						{% for value, label in index_status_filter_choices %}
						<option value="{{ value }}" {% if selected_status == value %}selected{% endif %}>{{ label }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="col-12 col-lg-2 d-flex gap-2">
					<button class="btn btn-primary w-100" type="submit">{% translate "Apply" %}</button>
					<a class="btn btn-outline-secondary" href="{% url 'mastery:pilot_index' %}">{% translate "Reset" %}</a>
				</div>
			</div>
		</div>
	</form>

	<div class="row g-3 mb-4">
		<div class="col-12 col-md-4">
			<div class="card shadow-sm border-0 h-100">
				<div class="card-body">
					<div class="small text-muted mb-1">{% translate "Configured fittings in view" %}</div>
					<div class="display-6 fw-semibold">{{ configured_fittings_count }}</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-4">
			<div class="card shadow-sm border-0 h-100">
				<div class="card-body">
					<div class="small text-muted mb-1">{% if selected_character %}{% blocktranslate with name=selected_character.eve_character.character_name %}Flyable fittings for {{ name }}{% endblocktranslate %}{% else %}{% translate "Flyable fittings" %}{% endif %}</div>
					<div class="display-6 fw-semibold text-success">{{ flyable_fittings_count }}</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-4">
			<div class="card shadow-sm border-0 h-100">
				<div class="card-body">
					<div class="small text-muted mb-1">{% translate "Focused pilot" %}</div>
					<div class="fs-5 fw-semibold">{% if selected_character %}{{ selected_character.eve_character.character_name }}{% else %}{% translate "Best available pilot" %}{% endif %}</div>
				</div>
			</div>
		</div>
	</div>

	<div id="pilotDoctrineContainer">
	{% for doctrine_card in doctrine_cards %}
		<div class="card mb-4 shadow-sm border-0 doctrine-card" data-doctrine-name="{{ doctrine_card.doctrine.name|lower }}" data-priority="{{ doctrine_card.priority }}">
		<div class="card-header d-flex justify-content-between align-items-center py-3">
			<div class="d-flex align-items-center gap-2">
				<img src="{{ doctrine_card.doctrine.icon_url }}" class="rounded" width="36" height="36" alt="{{ doctrine_card.doctrine.name }}">
				<div>
					<div class="fw-semibold fs-5 d-flex align-items-center gap-2">
						<a class="text-decoration-none text-body" href="{% url 'fittings:view_doctrine' doctrine_card.doctrine.id %}">{{ doctrine_card.doctrine.name }}</a>
						{% include 'mastery/partials/_priority_badge.html' with priority=doctrine_card.priority %}
					</div>
				<div class="small text-muted">{% blocktranslate count count=doctrine_card.fittings|length %}{{ count }} fitting visible after filters{% plural %}{{ count }} fittings visible after filters{% endblocktranslate %}</div>
				</div>
			</div>
			<span class="badge bg-secondary">{% translate "Doctrine" %}</span>
		</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: 320px;">
						<col style="width: 250px;">
						<col style="width: 120px;">
						<col style="width: 120px;">
						<col style="width: 120px;">
						<col style="width: 120px;">
						<col style="width: 130px;">
					</colgroup>
				<thead class="mastery-table-head">
				<tr>
					<th>{% translate "Fitting" %}</th>
					<th>{% translate "Readiness" %}</th>
						{% include 'mastery/partials/_summary_status_headers.html' with include_tooltips=1 include_chars_suffix=0 status_thresholds=status_thresholds %}
					</tr>
					</thead>
					<tbody>
					{% for fit_card in doctrine_card.fittings %}
				<tr class="pilot-fit-row" data-fit-name="{{ fit_card.fitting.name|lower }} {{ fit_card.fitting.ship_type.name|lower }} {{ doctrine_card.doctrine.name|lower }}" data-priority="{{ fit_card.priority }}">
					<td>
						<a class="text-decoration-none text-body" href="{% url 'mastery:pilot_fitting_detail' fit_card.fitting.id %}{% if selected_character %}?character_id={{ selected_character.id }}{% endif %}">
							<div class="d-flex align-items-center gap-2 fitting-main-line">
								<img src="{{ fit_card.fitting.ship_type_type_id|type_render_url:32 }}" class="rounded flex-shrink-0" width="32" height="32" alt="{{ fit_card.fitting.ship_type.name }}">
								<div class="min-w-0">
									<div class="d-flex align-items-center gap-1 flex-wrap">
										<span class="fw-semibold fitting-name" title="{% translate 'Open fit planner' %}">{{ fit_card.fitting.name }}</span>
													{% include 'mastery/partials/_priority_badge.html' with priority=fit_card.priority %}
									</div>
								</div>
							</div>
						</a>
							<div class="small text-muted text-truncate">{{ fit_card.fitting.ship_type.name }}</div>
							<div class="d-flex gap-1 flex-wrap mt-1">
							<button
								type="button"
								class="btn btn-xs btn-outline-info preview-fittings-btn"
								data-bs-toggle="modal"
								data-bs-target="#fittingPreviewModal"
								data-preview-url="{% url 'mastery:fitting_skills_preview' fit_card.fitting.id %}"
								data-fitting-name="{{ fit_card.fitting.name|escape }}"
							>
								{% translate "Preview" %}
							</button>
							{% if perms.mastery.manage_fittings %}
							<a class="btn btn-xs btn-outline-secondary" href="{% url 'mastery:fitting_skills' fit_card.fitting.id %}">{% translate "Edit" %}</a>
								{% endif %}
							</div>
						{% if fit_card.is_configured %}
						<div class="small mt-2">
							<span class="badge {% if fit_card.can_any_fly %}bg-success{% else %}bg-warning text-dark{% endif %}">
								{% if fit_card.can_any_fly %}{% translate "At least one pilot can fly" %}{% else %}{% translate "Training required" %}{% endif %}
								</span>
							</div>
						{% else %}
						<div class="small mt-2"><span class="badge bg-secondary">{% translate "Leadership has not configured this fit yet" %}</span></div>
							{% endif %}
						</td>
						<td>
							{% if fit_card.is_configured and fit_card.selected_progress %}
							<div class="mb-2 d-flex justify-content-between">
								<span class="small text-muted">{{ selected_character.eve_character.character_name }}</span>
								<span class="badge bg-{{ fit_card.selected_progress.status_class }}{% if fit_card.selected_progress.status_class == 'warning' %} text-dark{% endif %}">{{ fit_card.selected_progress.status_label }}</span>
							</div>
							<div class="small text-muted mb-1">{% translate "Required" %} {{ fit_card.selected_progress.required_pct }}%</div>
							<div class="progress mb-2" style="height: 8px;">
								<div class="progress-bar bg-success" role="progressbar" style="width: {{ fit_card.selected_progress.required_pct|unlocalize }}%"></div>
							</div>
							<div class="small text-muted mb-1">{% translate "Recommended" %} {{ fit_card.selected_progress.recommended_pct }}%</div>
							<div class="progress" style="height: 8px;">
								<div class="progress-bar bg-primary" role="progressbar" style="width: {{ fit_card.selected_progress.recommended_pct|unlocalize }}%"></div>
							</div>
							{% elif fit_card.is_configured %}
							<div class="small text-muted mb-1">{% translate "Best required coverage" %} {{ fit_card.best_required_pct }}%</div>
							<div class="progress mb-2" style="height: 8px;">
								<div class="progress-bar bg-success" role="progressbar" style="width: {{ fit_card.best_required_pct|unlocalize }}%"></div>
							</div>
							<div class="small text-muted mb-1">{% translate "Best recommended coverage" %} {{ fit_card.best_recommended_pct }}%</div>
							<div class="progress" style="height: 8px;">
								<div class="progress-bar bg-primary" role="progressbar" style="width: {{ fit_card.best_recommended_pct|unlocalize }}%"></div>
							</div>
						{% else %}
						<span class="text-muted small">{% translate "No pilot data available." %}</span>
							{% endif %}
						</td>
						<td>
							{% if fit_card.is_configured %}
							<div class="character-overview-list pilot-avatar-cluster">
								{% for character_row in fit_card.elite_rows %}
								{% include 'mastery/partials/_pilot_avatar_button.html' with popover_id=character_row.popover_id character=character_row.character status_bucket=character_row.status_bucket status_label=character_row.progress.status_label progress=character_row.progress required_missing_sp=character_row.required_missing_sp recommended_missing_sp=character_row.recommended_missing_sp action_url=character_row.action_url action_btn='primary' is_selected=character_row.is_selected %}
								{% empty %}<span class="text-muted small">-</span>{% endfor %}
							</div>
							{% else %}<span class="text-muted small">-</span>{% endif %}
						</td>
						<td>
							{% if fit_card.is_configured %}
							<div class="character-overview-list pilot-avatar-cluster">
								{% for character_row in fit_card.almost_elite_rows %}
								{% include 'mastery/partials/_pilot_avatar_button.html' with popover_id=character_row.popover_id character=character_row.character status_bucket=character_row.status_bucket status_label=character_row.progress.status_label progress=character_row.progress required_missing_sp=character_row.required_missing_sp recommended_missing_sp=character_row.recommended_missing_sp action_url=character_row.action_url action_btn='primary' is_selected=character_row.is_selected %}
								{% empty %}<span class="text-muted small">-</span>{% endfor %}
							</div>
							{% else %}<span class="text-muted small">-</span>{% endif %}
						</td>
						<td>
							{% if fit_card.is_configured %}
							<div class="character-overview-list pilot-avatar-cluster">
								{% for character_row in fit_card.can_fly_rows %}
								{% include 'mastery/partials/_pilot_avatar_button.html' with popover_id=character_row.popover_id character=character_row.character status_bucket=character_row.status_bucket status_label=character_row.progress.status_label progress=character_row.progress required_missing_sp=character_row.required_missing_sp recommended_missing_sp=character_row.recommended_missing_sp action_url=character_row.action_url action_btn='primary' is_selected=character_row.is_selected %}
								{% empty %}<span class="text-muted small">-</span>{% endfor %}
							</div>
							{% else %}<span class="text-muted small">-</span>{% endif %}
						</td>
						<td>
							{% if fit_card.is_configured %}
							<div class="character-overview-list pilot-avatar-cluster">
								{% for character_row in fit_card.almost_fit_rows %}
								{% include 'mastery/partials/_pilot_avatar_button.html' with popover_id=character_row.popover_id character=character_row.character status_bucket=character_row.status_bucket status_label=character_row.progress.status_label progress=character_row.progress required_missing_sp=character_row.required_missing_sp recommended_missing_sp=character_row.recommended_missing_sp action_url=character_row.action_url action_btn='primary' is_selected=character_row.is_selected %}
								{% empty %}<span class="text-muted small">-</span>{% endfor %}
							</div>
							{% else %}<span class="text-muted small">-</span>{% endif %}
						</td>
						<td>
							{% if fit_card.is_configured %}
							<div class="character-overview-list pilot-avatar-cluster">
								{% for character_row in fit_card.needs_training_rows %}
								{% include 'mastery/partials/_pilot_avatar_button.html' with popover_id=character_row.popover_id character=character_row.character status_bucket=character_row.status_bucket status_label=character_row.progress.status_label progress=character_row.progress required_missing_sp=character_row.required_missing_sp recommended_missing_sp=character_row.recommended_missing_sp action_url=character_row.action_url action_btn='primary' is_selected=character_row.is_selected %}
								{% empty %}<span class="text-muted small">-</span>{% endfor %}
							</div>
							{% else %}
							<span class="text-muted small">-</span>
							{% endif %}
						</td>
					</tr>
					{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
	{% empty %}
	<div class="alert alert-info mb-0">{% translate "No accessible doctrines found." %}</div>
	{% endfor %}
	</div>
</div>

{% include 'mastery/partials/_fitting_preview_modal.html' %}

<style>
	{% include 'mastery/partials/_pilot_avatar_popover_styles.html' %}

	.pilot-avatar-btn.is-selected .pilot-avatar-ring {
		box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.55), 0 0 0 4px rgba(25, 135, 84, 0.16);
	}

	.fitting-main-line {
		min-width: 0;
	}

	.fitting-name {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.character-overview-list {
		max-height: 165px;
		overflow-y: auto;
		padding-right: 2px;
	}

	.btn-xs {
		padding: 0.1rem 0.4rem;
		font-size: 0.72rem;
		line-height: 1.2;
	}
</style>

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

        const searchInput = document.getElementById('pilotSearchInput');
        if (!searchInput) {
            return;
        }

        searchInput.addEventListener('input', () => {
            const query = searchInput.value.trim().toLowerCase();
            document.querySelectorAll('.pilot-fit-row').forEach((row) => {
                const haystack = `${row.dataset.fitName || ''}`;
                row.style.display = haystack.includes(query) ? '' : 'none';
            });

            document.querySelectorAll('.doctrine-card').forEach((card) => {
                const visibleRows = card.querySelectorAll('.pilot-fit-row:not([style*="display: none"])').length;
                card.style.display = visibleRows > 0 ? '' : 'none';
            });
        });

    });
</script>
{% include 'mastery/partials/_pilot_popover_init_script.html' %}
{% endblock %}