{% 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">Skill Mastery</h2>
			<p class="text-muted mb-0">Doctrine readiness overview for your characters ({{ character_count }} tracked).</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">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">Focus character</label>
					<select id="pilotCharacterFilter" name="character_id" class="form-select">
						<option value="">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">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">Apply</button>
					<a class="btn btn-outline-secondary" href="{% url 'mastery:pilot_index' %}">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">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">Flyable fittings{% if selected_character %} for {{ selected_character.eve_character.character_name }}{% 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">Focused pilot</div>
					<div class="fs-5 fw-semibold">{% if selected_character %}{{ selected_character.eve_character.character_name }}{% else %}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 }}">
		<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">
						<a class="text-decoration-none text-body" href="{% url 'fittings:view_doctrine' doctrine_card.doctrine.id %}">{{ doctrine_card.doctrine.name }}</a>
					</div>
				<div class="small text-muted">{{ doctrine_card.fittings|length }} fitting{{ doctrine_card.fittings|length|pluralize }} visible after filters</div>
				</div>
			</div>
			<span class="badge bg-secondary">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>Fitting</th>
						<th>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 }}">
						<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 }}">
									<span class="fw-semibold fitting-name" title="Open fit planner">{{ fit_card.fitting.name }}</span>
								</div>
							</a>
							<div class="small text-muted text-truncate">{{ fit_card.fitting.ship_type.name }}</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 %}At least one pilot can fly{% else %}Training required{% endif %}
								</span>
							</div>
							{% else %}
							<div class="small mt-2"><span class="badge bg-secondary">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">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">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">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">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">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' action_label='Open pilot focus' 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' action_label='Open pilot focus' 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' action_label='Open pilot focus' 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' action_label='Open pilot focus' 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' action_label='Open pilot focus' 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">No accessible doctrines found.</div>
	{% endfor %}
	</div>
</div>

<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;
	}
</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 %}