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

<!-- Page content -->

{% set sub_title = "Manage locations" %}
{% 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">Location</span>
		<span class="table_label">Boxes</span>
		<span class="table_label">Edit loc</span>
		<span class="table_label">List boxes</span>
		<span class="table_label">Delete</span>
	</span>
	<span class="table_body">
	{% set ns = namespace(counter=-1) %}
	{% for loc_name in locations %}
	{% set ns.counter = ns.counter+1 %}
	<div class="table_row">
		<div class="table_cell">
			<div class="tooltip">
				{{ loc_name | truncate(25) }}
				<span class="tooltiptext">{{ loc_name }}</span>
			</div>
		</div>
		<div class="table_cell">{{loc_count[ns.counter]}}</div>
		<div class="table_cell">
			{% if loc_name=="Unspecified" %}
				<button type="submit" class="imps icon-only edit" disabled></button>
			{% else %}
				<a href="/cp_editloc/{{loc_name}}">
					<button type="submit" class="imps icon-only edit"></button>
				</a>
			{% endif%}
		</div>
		<div class="table_cell">
			{% if loc_count[ns.counter] != 0 %}
				<a href="/boxlistbyloc/{{loc_name}}"><button class="imps icon-only box_closed"></button></a>
			{% else %}
				<button class="imps icon-only box_closed" disabled></button>
			{% endif %}
		</div>
		<div class="table_cell">
			{% if loc_name=="Unspecified" %}
				<button type="submit" class="imps icon-only trash" disabled></button>
			{% else %}
				<a href="/cp_locdel/{{loc_name}}"><button type="submit" class="imps icon-only trash"></button></a>
			{% endif%}       
		</div>
	</div>
	{% endfor %}
	</span>
</div>
</div>
<div>
	<div>
                <form action="/cp_addloc" name="add_loc" id="add_loc" method="POST" onsubmit="return validateForm(event);" >
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<input type="text" name="new_loc" id="new_loc" width="14" maxlength="255"></input>
				<button type="submit" class="imps icon-left add">
					Add location
				</button>
		</form>
	</div>
</div>
<script>
function validateForm() {
  let new_cat = document.forms["add_loc"]["new_loc"].value;

  if (new_cat == ""){
    showValidationError("A location name <br>is required.");
    return false;
  }

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

</script>
{% endblock %}