{% include 'includes/header.html' %}
{% include 'includes/warning.html' %}
{% set ns = namespace(ocn=" ") %}

<!-- Page content -->

<p class="page_title">Manage Locations</p>
<div class="grid-cat-container">
	<div class="grid-item-left">
		<b>Location</b>
	</div>
        <div class="grid-item">
                <b>Boxes</b>
        </div>
        <div class="grid-item">
                <b>Edit loc</b>
        </div>

        <div class="grid-item">
                <b>List boxes</b>
	</div>
        <div class="grid-item">
		<b>Delete</b>
        </div>
        {% set ns.ocn = loc_name %} 
        {% set ns = namespace(counter=-1) %}
	{% for loc_name in locations %}
        {% set ns.counter = ns.counter+1 %}
	<div class="grid-item-left">
		{{loc_name}}
	</div>
        <div class="grid-item">{{loc_count[ns.counter]}}</div>
        <div class="grid-item">
                {% if loc_name=="Unspecified" %}
                        <button type="submit" class="imps ico_imps edit" disabled></button>
                {% else %}
                        <a href="/cp_editloc/{{loc_name}}">
				<button type="submit" class="imps ico_imps edit"></button>
			</a>
                {% endif%}
        </div>
        <div class="grid-item">
		{% if loc_count[ns.counter] != 0 %}
			<a href="/boxlistbyloc/{{loc_name}}"><button class="imps ico_imps box_closed"></button></a>
		{% else %}
			<button class="imps ico_imps box_closed" disabled></button>
		{% endif %}
	</div>
        <div class="grid-item">
	        {% if loc_name=="Unspecified" %}
                	<button type="submit" class="imps ico_imps trash" disabled></button>
        	{% else %}
			<a href="/cp_delloc/{{loc_name}}"><button type="submit" class="imps ico_imps trash"></button></a>
	        {% endif%}       
	</div>
	{% endfor %}
</div>
<div>
	<div>
                <form action="/cp_addloc" name="add_loc" id="add_loc" method="POST" onsubmit="return validateForm(event);" >
				<input type="text" name="new_loc" id="new_loc" width="14"></input>
				<button type="submit" class="imps add" style="width: 165px;">
					Add location
				</button>
		</form>
	</div>
</div>
<script>
// Modal dialog setup
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

function validateForm() {
  let new_cat = document.forms["add_loc"]["new_loc"].value;

  if (new_cat == ""){
    modal.style.display = "block";
    document.getElementById('err_message').innerHTML="A location name <br>is required.";
    span.onclick = function() {
        modal.style.display = "none";
    }
    return false;
  }
}

</script>
{% include 'includes/footer.html' %}