{% extends 'evewiki/base.html' %}
{% load i18n %}
{% load django_bootstrap5 %}
{% load humanize %}

{% block details %}
<div class="d-flex align-items-center mb-3">
	<h1 class="h3 mb-0">
		{% if page.id %}
			<i class="fa-solid fa-pen-to-square me-1"></i>{% translate "Edit page" %}
			<small class="text-muted">— {{ page.title }}</small>
		{% else %}
			<i class="fa-solid fa-plus me-1"></i>{% translate "New page" %}
		{% endif %}
	</h1>
</div>

<ul class="nav nav-tabs mb-3" id="pageTabs" role="tablist">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details-pane" type="button" role="tab" aria-controls="details-pane" aria-selected="true">
			<i class="fa-solid fa-circle-info me-1"></i>{% translate "Details" %}
		</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="versions-tab" data-bs-toggle="tab" data-bs-target="#versions-pane" type="button" role="tab" aria-controls="versions-pane" aria-selected="false">
			<i class="fa-solid fa-clock-rotate-left me-1"></i>{% translate "Versions" %}
			<span class="badge bg-secondary ms-1">{{ versions|length }}</span>
		</button>
	</li>
</ul>

<div class="tab-content" id="pageTabsContent">
	<div class="tab-pane fade show active" id="details-pane" role="tabpanel" aria-labelledby="details-tab">
		<div class="row g-3">
			<div class="col-lg-8">
				{% bootstrap_form_errors form %}
				<form method="post" novalidate>
					{% csrf_token %}

					<div class="card shadow-sm mb-3">
						<div class="card-header bg-transparent">
							<i class="fa-solid fa-id-card me-1"></i><strong>{% translate "Page identity" %}</strong>
						</div>
						<div class="card-body">
							<div class="row g-3">
								<div class="col-md-8">
									{% bootstrap_field form.title layout='floating' %}
								</div>
								<div class="col-md-4">
									{% bootstrap_field form.priority layout='floating' %}
								</div>
								<div class="col-md-6">
									{% bootstrap_field form.slug layout='floating' %}
								</div>
								<div class="col-md-6">
									<label class="form-label" for="path-preview">{% translate "Path preview" %}</label>
									<div class="input-group">
										<span class="input-group-text">/evewiki</span>
										<span class="form-control bg-body text-truncate" id="path-preview">…</span>
									</div>
									<div class="form-text">{% translate "Live preview of the page URL" %}</div>
								</div>
							</div>
						</div>
					</div>

					<div class="card shadow-sm mb-3">
						<div class="card-header bg-transparent">
							<i class="fa-solid fa-folder-tree me-1"></i><strong>{% translate "Hierarchy" %}</strong>
						</div>
						<div class="card-body">
							{% bootstrap_field form.parent %}
						</div>
					</div>

					<div class="card shadow-sm mb-3">
						<div class="card-header bg-transparent">
							<i class="fa-solid fa-lock me-1"></i><strong>{% translate "Access control" %}</strong>
						</div>
						<div class="card-body">
							<div class="row g-3">
								<div class="col-md-6">
									{% bootstrap_field form.states %}
								</div>
								<div class="col-md-6">
									{% bootstrap_field form.groups %}
								</div>
							</div>
						</div>
					</div>

					<div class="card shadow-sm mb-3">
						<div class="card-header bg-transparent">
							<i class="fa-solid fa-eye me-1"></i><strong>{% translate "Display options" %}</strong>
						</div>
						<div class="card-body">
							<div class="row g-3">
								<div class="col-md-6">
									<div class="form-check form-switch">
										{{ form.is_public }}
										<label class="form-check-label" for="{{ form.is_public.id_for_label }}">
											{% translate "Publicly accessible" %}
										</label>
									</div>
									<div class="form-text">{{ form.is_public.help_text|safe }}</div>
								</div>
								<div class="col-md-6">
									<div class="form-check form-switch">
										{{ form.hide_from_menu }}
										<label class="form-check-label" for="{{ form.hide_from_menu.id_for_label }}">
											{% translate "Hide from menu" %}
										</label>
									</div>
									<div class="form-text">{{ form.hide_from_menu.help_text }}</div>
								</div>
							</div>
						</div>
					</div>

					<div class="d-flex flex-wrap gap-2 align-items-center mt-3">
						<button type="submit" class="btn btn-primary">
							<i class="fa-solid fa-save me-1"></i>
							{% if page.id %}
								{% translate "Update" %}
							{% else %}
								{% translate "Create" %}
							{% endif %}
						</button>
						<a href="{% if page.id %}/evewiki/{{ page.path }}{% else %}/evewiki/{% endif %}" class="btn btn-outline-secondary">
							<i class="fa-solid fa-xmark me-1"></i>{% translate "Cancel" %}
						</a>
						{% if page.id %}
						<a href="/evewiki/page_delete?id={{ page.pk }}" class="btn btn-outline-danger ms-auto">
							<i class="fa-solid fa-trash me-1"></i>{% translate "Delete" %}
						</a>
						{% endif %}
					</div>
				</form>
			</div>

			{% if page.id %}
			<div class="col-lg-4">
				<div class="card shadow-sm mb-3">
					<div class="card-header bg-transparent">
						<i class="fa-solid fa-circle-info me-1"></i><strong>{% translate "Quick info" %}</strong>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<span class="text-muted">{% translate "Path" %}</span>
							<code class="text-truncate ms-2" style="max-width: 12rem;" title="/{{ page.path }}">/{{ page.path }}</code>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<span class="text-muted">{% translate "Versions" %}</span>
							<span class="badge bg-secondary">{{ versions|length }}</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<span class="text-muted">{% translate "Public" %}</span>
							{% if page.is_public %}
								<span class="badge bg-success"><i class="fa-solid fa-check me-1"></i>{% translate "Yes" %}</span>
							{% else %}
								<span class="badge bg-secondary">{% translate "No" %}</span>
							{% endif %}
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<span class="text-muted">{% translate "Hidden" %}</span>
							{% if page.hide_from_menu %}
								<span class="badge bg-warning text-dark">{% translate "Yes" %}</span>
							{% else %}
								<span class="badge bg-secondary">{% translate "No" %}</span>
							{% endif %}
						</li>
					</ul>
					<div class="card-body border-top">
						<a href="/evewiki/{{ page.path }}" class="btn btn-sm btn-primary w-100">
							<i class="fa-solid fa-arrow-up-right-from-square me-1"></i>{% translate "View page" %}
						</a>
						{% if page.is_public %}
						<a href="/evewiki/public/{{ page.path|cut:'/evewiki' }}" target="_blank" class="btn btn-sm btn-outline-success w-100 mt-2">
							<i class="fa-solid fa-globe me-1"></i>{% translate "Open public version" %}
						</a>
						{% endif %}
					</div>
				</div>
			</div>
			{% endif %}
		</div>
	</div>

	<div class="tab-pane fade" id="versions-pane" role="tabpanel" aria-labelledby="versions-tab">
		{% if versions %}
		<div class="card shadow-sm">
			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0">
					<thead>
						<tr>
							<th style="width: 12rem;"><i class="fa-solid fa-calendar me-1"></i>{% translate "When" %}</th>
							<th style="width: 12rem;"><i class="fa-solid fa-user me-1"></i>{% translate "By" %}</th>
							<th class="text-end" style="width: 6rem;">{% translate "Actions" %}</th>
						</tr>
					</thead>
					<tbody>
						{% for version in versions %}
						<tr>
							<td>
								<span title="{{ version.created|date:'Y-m-d H:i:s' }}">{{ version.created|naturaltime }}</span>
								{% if forloop.first %}<span class="badge bg-primary ms-1">{% translate "latest" %}</span>{% endif %}
							</td>
							<td>{{ version.user|default:"system" }}</td>
							<td class="text-end">
								<button type="button"
										class="btn btn-sm btn-secondary view-version-btn"
										data-bs-toggle="modal"
										data-bs-target="#versionModal"
										data-content="{{ version.content|default_if_none:''|escape }}"
										data-meta="{{ version.created|naturaltime|escape }} — {{ version.user|default:'system'|escape }}"
										title="{% translate 'View content' %}">
									<i class="fa-solid fa-eye"></i>
									<span class="d-none d-md-inline ms-1">{% translate "View" %}</span>
								</button>
							</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>

		<div class="modal fade" id="versionModal" tabindex="-1" aria-labelledby="versionModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-fullscreen-lg-down modal-xl">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="versionModalLabel">
							<i class="fa-solid fa-clock-rotate-left me-1"></i>{% translate "Version content" %}
						</h5>
						<small class="text-muted ms-2" id="versionMeta"></small>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
					</div>
					<div class="modal-body p-0">
						<textarea class="form-control font-monospace border-0 rounded-0 version-content-area"
								  id="versionContent"
								  readonly
								  style="min-height: 60vh; resize: vertical;"
								  aria-label="{% translate 'Version content' %}"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
							{% translate "Close" %}
						</button>
					</div>
				</div>
			</div>
		</div>
		{% else %}
		<div class="text-center text-muted my-5">
			<i class="fa-solid fa-clock-rotate-left fa-2x mb-2 d-block opacity-50"></i>
			{% translate "No version history yet." %}
		</div>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block extra_javascript %}
<script>
	// Set path from url
	const select = document.getElementById("id_parent");
	const urlParams = new URLSearchParams(window.location.search);
	const selectedValue = urlParams.get('parent_id');
	if (selectedValue && select) {
		for (let i = 0; i < select.options.length; i++) {
			if (select.options[i].value === selectedValue) {
				select.selectedIndex = i;
				break;
			}
		}
	}

	// Set slug from title
	const title_input = document.getElementById('id_title');
	const slug_input = document.getElementById('id_slug');
	if (title_input && slug_input) {
		title_input.addEventListener("blur", function(evt) {
			if (slug_input.value == '') {
				slug_input.value = title_input.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
				updatePathPreview();
			}
		});
	}

	// Live path preview
	const pathPreview = document.getElementById('path-preview');
	function updatePathPreview() {
		if (!pathPreview || !slug_input) return;
		const slug = slug_input.value || '{% translate "slug" %}';
		let parentPath = '';
		if (select && select.selectedIndex >= 0) {
			const text = select.options[select.selectedIndex].text || '';
			const match = text.match(/\[(.*?)\]/);
			if (match) {
				parentPath = match[1];
				if (parentPath === '/') parentPath = '';
			}
		}
		const combined = parentPath ? `${parentPath.replace(/\/$/, '')}/${slug}` : slug;
		pathPreview.textContent = combined;
	}
	if (slug_input) slug_input.addEventListener('input', updatePathPreview);
	if (select) select.addEventListener('change', updatePathPreview);
	updatePathPreview();

	// Open tab from URL hash
	if (window.location.hash === '#versions-pane') {
		const versionsTab = document.getElementById('versions-tab');
		if (versionsTab) {
			const tab = new bootstrap.Tab(versionsTab);
			tab.show();
		}
	}

	// Populate the shared version modal when a row button is clicked
	const versionModal = document.getElementById('versionModal');
	if (versionModal) {
		versionModal.addEventListener('show.bs.modal', function (event) {
			const button = event.relatedTarget;
			if (!button) return;
			const content = button.getAttribute('data-content') || '';
			const meta = button.getAttribute('data-meta') || '';
			const contentEl = document.getElementById('versionContent');
			const metaEl = document.getElementById('versionMeta');
			if (contentEl) contentEl.value = content;
			if (metaEl) metaEl.textContent = meta;
		});
	}
</script>
{% endblock %}

{% block extra_css %}
<style>
	.version-content-area {
		color: inherit;
		background-color: var(--bs-body-bg);
	}
	.form-check-input {
		cursor: pointer;
	}
	#path-preview {
		color: inherit;
	}
</style>
{% endblock %}

{% block extra_script %}
{% endblock %}