<!DOCTYPE html>
<!-- {{ reponame }} -->
<html>
	<head>
		<meta charset="utf-8"/>
		{% for js in javascript %}
		<!-- {{ js['name'] }} -->
		<script type="text/javascript">
			{{ js['content'] }}
		</script>
		{% endfor %}
		{% for css in stylesheets %}
		<style>
			{{ css }}
		</style>
		{% endfor %}
		<title>Issues for {{ repo['name'] }}</title>
	</head>
	<body>
		<div id="header">
			<h1 class="repo-title">
				<a class= "username" href="{{ repo['owner']['html_url'] }}">{{ repo['owner']['login'] }}</a>/<a class="reponame" href="{{ repo['html_url'] }}">{{ repo['name'] }}</a>
			</h1>
		</div>
		<div id="content">
			<div id="nav">
				<ul>
					<li class="btn-group">
						<a class="btn btn-group--left active state-open" id="filter_state_open" href="javascript:activateStateButton('filter_state_open')">Open</a>
						<a class="btn btn-group--right state-closed" id="filter_state_closed" href="javascript:activateStateButton('filter_state_closed')">Closed</a>
					</li>
				</ul>

				<ul>
					 <lh>Milestones</lh>
					{% for ms in milestones %}
					<li class="milestone visible {{ ms['status'] }}"
						data-milestone="{{ ms['number'] }}">
							<a href="javascript:selectMilestone({{ ms['number'] }})">{{ ms['title'] }}</a>
					</li>
					{% endfor %}
					<li class="milestone visible "
						data-milestone="None">
							<a href="javascript:selectMilestone('None')">Not in any milestone</a>
					</li>
				</ul>

				<ul>
					<lh>Labels</lh>
					{% for label in labels %}
					<li class="label visible" data-label="{{ label['name'] }}" data-color="{{ label['color'] }}"><div class="bg" style="background-color: #{{ label['color'] }};"></div><a href="javascript:toggleLabel('{{ label['name'] }}')">{{ label['name'] }}</a></li>
					{% endfor %}
					<li class="label visible"><a href="javascript:toggleLabel('None')">No label</a></li>
				</ul>

				<ul>
					<lh>Assigned to</lh>
					{% for assignee in assignees %}
					<li class="assignee visible" data-login="{{ assignee['login'] }}">
						<a href="javascript:selectAssignee('{{ assignee['login'] }}')">{{ assignee['login'] }}</a></li>
					{% endfor %}
					<li class="assignee visible" data-login=""><a href="javascript:selectAssignee('None')">Not assigned to anybody</a></li>
				</ul>
			</div>
		
		<div class="issues-list">
			{% for issue in issues %}
			<li class="issue-item visible"
				data-state="{{ issue['state'] }}"
				data-issue="{{ issue['number'] }}"
				data-milestone="{{ issue['milestone']['number'] }}"
				data-labels="{{ " ".join(issue['labelnames']) }}"
				data-assignee="{{ issue['assignee']['login'] }}">
					<a href="javascript:activateIssue({{ issue['number'] }})">{{ issue['title']|e }}</a>
			</li>
			{% endfor %}
		  </ul>
		</div>
		
		
		
		{% for issue in issues %}
		<div class="issue visible" data-issue="{{ issue['number'] }}" >
			<h2 class="issue-title"> {{ issue['title'] }}  <span class="issue-id">#{{ issue['number'] }}</span></h2>
			<div class="issue-details">
				<div class="status {{ issue['state'] }}">{{ issue['state'] }}</div>
				<div class="issue-author"><strong>{{ issue['user']['login'] }}</strong> opened this issue <span class="timeago" data-time="{{ issue['created_at'] }}">{{ issue['created_at'] }}</span> • <span class="commentCount" data-count="{{ issue['comments'] }}"></span></div>
			</div>

			{% if issue['body'] %}
			<div class="author {{ issue['user']['avatar_class'] }}">
			</div>
			<div class="comment">
				<div class="comment-details">
					<strong>{{ issue['user']['login'] }}</strong> commented on this issue <span class="timeago" data-time="{{ issue['created_at'] }}">{{ issue['created_at'] }}</span>
				</div>
				<div class="comment-content">{{ issue['body']|e }}</div>
			</div>
			{% endif %}

			{% for comment in issue['comments_list'] %}
			{% if comment['body'] %}
			<div class="author {{ comment['user']['avatar_class'] }}">
			</div>
			<div class="comment">
				<div class="comment-details">
					<div class="comment-author"><strong>{{ comment['user']['login'] }}</strong> commented on this issue <span class="timeago" data-time="{{ comment['created_at'] }}">{{ comment['created_at'] }}</span></div>
				</div>
				<div class="comment-content">{{ comment['body']|e }}</div>
			</div>
			{% endif %}
			{% endfor %}
		</div>
		{% endfor %}
	</body>
</html>
