{% extends "base.html" %}
{% block content %}
{% include 'includes/warning.html' %}
<div class="container-flex">
	<div class="row">
		<p class="page_title">Edit box {{box_num}}</p>
	</div>
	<div class="row">
		<p><a href="/boxrenumber/{{box_num}}"><button type="button" class="imps icon-left edit">Change #</button></a></p>
	</div>

	<form name="update_box" action="/boxedited" method="POST" onsubmit="return validateForm(event);">
	<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
	<input type="hidden" name="box_num" id="box_num" value="{{box_num}}">

	<div>
		<div>
			<div class="row">
				Location:
			</div>
			<div>
				<input list="box_loc" name="box_loc" placeholder="{{box_loc}}" maxlength="255" autocomplete="off">
				<datalist id="box_loc">
					{% for loc_name , loc_num in locations %}
						<option value="{{loc_name}}">{{loc_name}}</option>
					{% endfor %}
				</datalist>
			</div>
		</div>
		<div>
			<div>
				Box name
			</div>
			<div>
				<input type="text" id="box_name" name="box_name" size="25" maxlength="64" value="{{- box_name -}}">
			</div>
		</div>
	</div>

	<div>
		<div class="btn-pair">
			<div>
				<button type="submit" id="submit_button" class="imps icon-left update">
					Update
				</button>
			</div>
			<div>
				<a href="boxshowcontent/{{box_num}}">
					<button class="imps icon-left list">Show contents</button>
				</a>
			</div>
		</div>
	</div>
	</form>
</div>

<script>
function validateForm() {
  let box_loc = document.forms["update_box"]["box_loc"].value;

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

  let box_name = document.forms["update_box"]["box_name"].value;

  if (box_name.length > 64){
    showValidationError("Box names are limited to 64 characters.");
    return false;
  }
}
</script>
{% endblock %}