{% extends "base.html" %}
{% block content %}
{% include 'includes/warning.html' %}

<!-- Page content -->

{% set sub_title = "Manage categories" %}
{% set active_tab = 'BoxItem' %}
{% set tab_label = "Settings" %}
{% set back_url = "/control_panel" %}
{% include "includes/cp_tab_subheader.html" %}
<div class="container-flex">
	<div class="item_display_table">
		<span class="table_head">
			<span class="table_label">Cat name</span>
			<span class="table_label">Total items</span>
			<span class="table_label">Edit cat</span>
			<span class="table_label">List items</span>
			<span class="table_label">Delete</span>
		</span>
		<span class="table_body">
		{% for category in items_per_category %}
		<div class="table_row">
			<div class="table_cell">
				<div class="tooltip">
					{{ category[0] | truncate(25) }}
					<span class="tooltiptext">{{ category[0] }}</span>
				</div>
			</div>
			<div class="table_cell">
				{{category[1]}}
			</div>
			<div class="table_cell">
				{% if category[0] == "Uncategorized" %}
					<button class="imps icon-only edit" disabled></button>	
				{% else %}
				<a href="/cp_editcat/{{category[2]}}">
					<button class="imps icon-only edit"></button>
				</a>
				{% endif %}
			</div>
			<div class="table_cell">
				{% if category[1] == 0 %}
					<button class="imps icon-only list" disabled></button>
				{% else %}
				<a href="/itemsbycategory/{{category[0]}}">
					<button type="submit" class="imps icon-only list"></button>
				</a>
				{% endif %}
			</div>
			<div class="table_cell">
				{% if category[0] == "Uncategorized" %}
					<button class="imps icon-only trash" disabled></button>
				{% else %}
				<a href="/cp_catdel/{{category[2]}}">
					<button class="imps icon-only trash"></button>
				</a>
				{% endif %}
			</div>
		</div>
		{% endfor %}
		</span>
	</div>
</div>
	<div>
		<form action="/cp_addcat" name="add_cat" id="add_cat" method="POST" onsubmit="return validateForm(event);" >
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
			<input type="text" name="new_cat" id="new_cat" width="14" maxlength="64"></input>
			<button type="submit" class="imps icon-left add">
				Add category
			</button>
		</form>
	</div>
<script>
function validateForm() {
let new_cat = document.forms["add_cat"]["new_cat"].value;

if (new_cat == "" || new_cat.trim() == ""){
showValidationError("A category name is required.");
return false;
}

if (new_cat.length > 64){
showValidationError("Category names are limited to 64 characters.");
return false;
}

const existing_categories = {{ available_categories | tojson }};
const new_cat_normalized = new_cat.trim().toLowerCase();
const is_duplicate = existing_categories.some(
    function(cat) { return cat.toLowerCase() === new_cat_normalized; }
);
if (is_duplicate) {
showValidationError("A category named <br>\"" + new_cat + "\" already exists.<br>Please choose a different name.");
return false;
}
}

</script>
{% endblock %}