{% load static %}
{% load misc_tags %}


{% debug_warning %}

<div class="nav">
	<ul>
		<a href="/"><li id="logo" class="nav-hover"><b>Collabo<span class="crimson">Dev</span></b></li></a>
		<a onclick="toggleNavbar()"><li id="dropdown-widget"><img id="dropdown-icon" src="{% static 'images/dropdown_icon.png' %}"></li></a>
		<a href="/tasks/"><li>Tasks</li></a>
		<a href="/accounts/"><li>Users</li></a>
		<a href="/tasks/milestones/"><li>Milestones</li></a>
		<a href="/accounts/{{ user.username }}">
			<li id="user-widget"> 
				<img class="navbar-image" src="{% include 'bases/avatar_src_base.html' with target_user=user %}"><span class="nav-image-text">Profile</span>
			</li>
		</a>
		<a href="/accounts/settings"><li id="settings-widget"><img class="navbar-image" src="{% static  'images/settings_icon.png' %}" alt="Settings"><span class="nav-image-text">Settings</span></li></a>
	</ul>
</div>

<div class="progress-bar-div"><div class="progress-bar" style="width:0;"></div></div>
<script src="{% static 'js/setLevelColour.js' %}"></script>
<script>
progressBar = document.getElementsByClassName('progress-bar')[0]

progressBarColours = setLevelColour('{{ user.profile.tasks_completed }}')

progressBar.style.backgroundColor = progressBarColours[0]
progressBar.parentNode.style.backgroundColor = progressBarColours[1]

progressBar.style.width = String(((parseInt('{{ user.profile.tasks_completed }}') % 10) / 10) * 100) + '%'

function toggleNavbar() {
	var navbar_object = document.getElementById('settings-widget').parentNode
	var display_state = navbar_object.style.display

	if (display_state === "" || display_state === "none") {
		for (var i=2; i < navbar_object.parentNode.children.length; i++) {
			navbar_object.parentNode.children[i].style.display = "list-item"
		}
	}
	else {
		for (var i=2; i < navbar_object.parentNode.children.length; i++) {
			navbar_object.parentNode.children[i].style.display = "none"
		}
	}
}

window.addEventListener('resize', function() {
	var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

	var navbar_object = document.getElementById('settings-widget').parentNode
	var display_state = navbar_object.style.display

	if (width > 639) {
		for (var i=2; i < navbar_object.parentNode.children.length; i++) {
			navbar_object.parentNode.children[i].style.display = "list-item"
		}
	}
	else {
		for (var i=2; i < navbar_object.parentNode.children.length; i++) {
			navbar_object.parentNode.children[i].style.display = "none"
		}	
	}
})
</script>