{% extends request.is_appadmin|yesno:"app_admin/base.html,app_kit/base.html" %}
{% load i18n static template_content_tags %}

{% block extra_style %}
	<link href="{% static 'template_content/template_content.css' %}" rel="stylesheet">
{% endblock %}

{% block header %}
	<div class="container-fluid d-none d-md-block">
		<div class="row">
			<div class="col-12 text-center text-white bg-primary">
				<h2>{{ app.name }}</h2>
			</div>
		</div>
	</div>
{% endblock %}

{% block content %}
<div class="container">
	<div class="row">
		<div class="col-12 mt-4">
			<h3>{{ app.name }} {% trans 'TemplateContent' %}</h3>
			<hr>
			
			{% block subcontent %}
				<div class="row">
					<div class="col-12">
						<h4>{% trans 'Navigations' %}</h4>
						{% if supports_navigations %}
							{% if navigations %}
								<div class="row">
									{% for navigation in navigations %}
										
										<div id="navigation-{{ navigation.id }}" class="col-12 col-md-4">
											{% include 'template_content/ajax/navigation_list_entry.html' %}
										</div>
										
									{% endfor %}
								</div>
							{% else %}
								{% trans 'You do not have any navigations for this app yet.' %}
							{% endif %}
							<div class="row mt-3">
								<div class="col-12">
									<a href="#" data-url="{% url 'create_template_content_navigation' app.uid %}" class="xhr btn btn-outline-primary" ajax-target="ModalContent">{% trans 'Add new navigation' %}</a>
								</div>
							</div>
						{% else %}
							<div class="alert alert-danger">
								{% trans 'Your frontend does not support navigations.' %}
							</div>
						{% endif %}
					</div>
				</div>
				<hr>

				{% if updated_templates %}
					<div class="row my-5">
						<div class="col-12">
							<h4>{% trans 'Template updates' %}</h4>
							<div class="alert alert-info">
								{% trans 'There are updates available for the following templates. It is recommended to review the pages using those templates.' %}
							</div>
							<div class="row">
								<div class="col-6 col-md-3 col-lg-2">
									<ul class="list-group">
										{% for template_name, template in updated_templates.items %}
											<li class="list-group-item list-group-item-warning">
												{{ template_name|verbose_content_key }}
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>
						</div>
					</div>
					<hr>
				{% endif %}
				<div class="row mt-5">
					<div class="col-12">
						<h4>{% trans 'Pages' %}</h4>

						<div class="row mb-3">
							<div class="col-12">
								<div class="d-flex flex-wrap gap-2" role="group" aria-label="{% trans 'Page filters' %}">
									<input type="radio" class="btn-check" name="template-content-filter" id="template-content-filter-all" autocomplete="off" value="all" checked>
									<label class="btn btn-outline-primary" for="template-content-filter-all">{% trans 'All' %}</label>
									{% for template_choice in template_choices %}
										<input type="radio" class="btn-check" name="template-content-filter" id="template-content-filter-{{ forloop.counter }}" value="{{ template_choice.0 }}" autocomplete="off">
										<label class="btn btn-outline-primary" for="template-content-filter-{{ forloop.counter }}">{{ template_choice.1 }}</label>
									{% endfor %}
								</div>
							</div>
						</div>
						<hr>
						<div id="template-content-list-container">
							<div class="text-muted">{% trans 'Loading pages...' %}</div>
						</div>
						<br>
						<div class="row mt-3">
							<div class="col-12">
								<a href="{% url 'create_template_content' app.uid 'page' %}" class="btn btn-outline-primary">{% trans 'Add new page' %}</a>
							</div>
						</div>
					</div>
				</div>

				{% if page_assignments %}
					<div class="row mt-5">
						<div class="col-12">
							<h4>{% trans 'Page Assignments' %}</h4>
							<div class="row">
								{% for content in page_assignments %}
									{% if content.template_content %}
										{% get_locale content.template_content app.primary_language as localized_template_content %}
										{% with template_content=content.template_content %}
											<div id="template-content-{{ template_content.id }}" class="col-12 col-md-4">
												{% include 'template_content/template_content_list_entry.html' %}
											</div>
										{% endwith %}
									{% else %}
										<div class="col-12 col-md-4">
											<div class="card" style="width: 100%;">
												<div class="card-header">
													{{ content.assignment }}
													{% if content.required %}<span class="badge bg-warning text-dark ms-1">{% trans 'required' %}</span>{% endif %}
												</div>
												<div class="card-body">
													<h5 class="card-title">
														{{ content.assignment|title }}
													</h5>
													<div class="row">
														<div class="col">
															<span class="badge rounded-pill bg-danger">{% trans 'missing' %}</span>
														</div>
													</div>

													<hr>
													<div class="btn-group dropup">
														<button type="button" class="btn btn-xs btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															{% trans 'Manage' %}
														</button>
														<div class="dropdown-menu">
															<a class="dropdown-item" href="{% url 'create_template_content' app.uid content.template_type content.assignment  %}">{% trans 'create' %}</a>
														</div>
													</div>
										
												</div>
											</div>
										</div>
									{% endif %}
								{% endfor %}
							</div>
							
						</div>
					</div>
				{% endif %}

				{% if unsupported_contents %}
					<div class="row mt-5">
						<div class="col-12">
							<h4>{% trans 'Unsupported pages' %}</h4>
							<div class="alert alert-danger">
								{% trans 'These pages are not supported by your current frontend.' %}
							</div>
							<div class="row">
								{% for localized_template_content in unsupported_contents %}
									{% with template_content=localized_template_content.template_content %}
										<div id="template-content-{{ template_content.id }}" class="col-12 col-md-4 mb-4">
											{% include 'template_content/template_content_list_entry.html' %}
										</div>
									{% endwith %}
								{% endfor %}
							</div>
						</div>
					</div>
				{% endif %}
					
			{% endblock %}
		</div>
	</div>
</div>
{% endblock %}

{% block extra_script %}
	<script>
		$(document)
			.off("click.templateContentMoveUp", "#template-content-list-container .move-template-content-up-button")
			.on("click.templateContentMoveUp", "#template-content-list-container .move-template-content-up-button", positionmanager.onMoveForward);
		$(document)
			.off("click.templateContentMoveDown", "#template-content-list-container .move-template-content-down-button")
			.on("click.templateContentMoveDown", "#template-content-list-container .move-template-content-down-button", positionmanager.onMoveBack);

		const templateContentHomeUrl = "{% url 'template_content_home' app.uid %}";
		const templateContentListContainer = $("#template-content-list-container");
		const buildTemplateContentUrl = (templateName) => {
			if (templateName && templateName !== "all") {
				return `${templateContentHomeUrl}?template=${encodeURIComponent(templateName)}`;
			}

			return templateContentHomeUrl;
		};

		const setSelectedTemplateFilterFromUrl = () => {
			const params = new URLSearchParams(window.location.search);
			const templateParam = params.get("template") || "all";
			let foundMatchingFilter = false;

			$("input[name='template-content-filter']").each(function() {
				if ($(this).val() === templateParam) {
					$(this).prop("checked", true);
					foundMatchingFilter = true;
					return false;
				}
			});

			if (!foundMatchingFilter) {
				$("#template-content-filter-all").prop("checked", true);
			}
		};

		const fetchTemplateContentList = (templateName = null) => {
			const selectedTemplateName = templateName !== null
				? templateName
				: $("input[name='template-content-filter']:checked").val();
			const requestUrl = buildTemplateContentUrl(selectedTemplateName);

			$.get(requestUrl, function(responseHtml) {
				templateContentListContainer.html(responseHtml);
				initializeTemplateContentPagination();
				ajaxify('template-content-list-container');
			});
		};

		const initializeTemplateContentPagination = () => {
			if ($.fn.endlessPaginate) {
				$("#template-content-list-container .endless_page_template").endlessPaginate({
					onCompleted: function() {
						ajaxify('template-content-list-container');
					}
				});
			}
		};

		setSelectedTemplateFilterFromUrl();
		fetchTemplateContentList();

		window.addEventListener("pageshow", function(event) {
			if (event.persisted) {
				setSelectedTemplateFilterFromUrl();
				fetchTemplateContentList();
			}
		});

		window.addEventListener("popstate", function() {
			setSelectedTemplateFilterFromUrl();
			fetchTemplateContentList();
		});

		$("input[name='template-content-filter']").on("change", function() {
			const templateName = $(this).val();
			const browserUrl = buildTemplateContentUrl(templateName);
			window.history.pushState({ template: templateName }, "", browserUrl);
			fetchTemplateContentList(templateName);
		});
	</script>
{% endblock %}