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

{% block details %}
<ul class="nav nav-tabs" 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" type="button" role="tab" aria-controls="details" aria-selected="true">Details</button>
	</li>
	<li class="nav-item" role="presentation">
	  <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#verions" type="button" role="tab" aria-controls="profile" aria-selected="false">Versions</button>
	</li>
  </ul>
  <div class="tab-content" id="myTabContent">
	<div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
		<form method="post">
			{% csrf_token %}
			{{ form }}
			<div class="d-flex justify-content-between">
				<button type="submit" class="btn btn-primary">
					{% if page.id %}
						{% translate "Update" %}
					{% else %}
						{% translate "Create" %}
					{% endif %}
				</button>
				<a href="/evewiki/{{ page.path }}" class="btn btn-secondary">
					{% translate "Cancel" %}
				</a>
				<a href="/evewiki/page_delete?id={{ page.pk }}" class="btn btn-danger">
					Delete
				</a>
			</div>
		</form>
	</div>
	<div class="tab-pane fade" id="verions" role="tabpanel" aria-labelledby="verions-tab">
		<table class="table">
			<thead>
			  <tr>
				<th scope="col">Created</th>
				<th scope="col">User</th>
				<th scope="col">Content</th>
			  </tr>
			</thead>
			<tbody>
			{% for version in versions %}
				<tr>
					<td>{{ version.created }}</td>
					<td>{{ version.user }}</td>
					<td><pre>{{ version.content }}</pre></td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</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) {
		// Find the option with the matching value
		for (let i = 0; i < select.options.length; i++) {
			if (select.options[i].value === selectedValue) {
				select.selectedIndex = i;
				break;
			}
		}
	}

	// Set slug from title
	title_input = document.getElementById('id_title');
	slug_input = document.getElementById('id_slug');
	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, '');
		}
	});

</script>
{% endblock %}

{% block extra_css %}
<style>
	form {padding:1rem;}
	form .help-block {opacity:.75;font-weight:lighter;}
</style>
{% endblock %}

{% block extra_script %}
{% endblock %}